Les transitions présentent de nombreux avantages pour les utilisateurs. Par exemple, elles permettent de conserver leur contexte dans leur contexte et de réduire la perception de la latence. Les développeurs veulent pouvoir créer des transitions fluides entre les pages, ce qui contribue à accroître l'engagement des utilisateurs sur leur site.
Cependant, il était très difficile d'activer les transitions d'état, car les développeurs devaient gérer les états de deux éléments différents. Même un simple fondu enchaîné implique que les deux états soient présents en même temps. Cela pose des problèmes d'utilisabilité, tels que la gestion d'interaction supplémentaire sur l'élément sortant. Pour les utilisateurs d'appareils d'assistance, il existe une période où les états "avant" et "après" se trouvent en même temps dans le DOM. En outre, les objets peuvent se déplacer dans l'arbre d'une manière optimale visuellement, mais ils peuvent facilement entraîner une perte de la position de lecture et de la concentration.
Lancée dans Chrome 111, l'API View Transitions permet de créer des transitions simples et fluides entre les pages. Il vous permet d'effectuer des modifications DOM sans chevauchement entre les états, et de créer une animation de transition entre les états à l'aide de vues avec instantané.
Vous vous demandez peut-être dans quelle mesure il est facile à mettre en œuvre. Quels types de cas d'utilisation s'agit-il ? Comment les autres développeurs utilisent-ils les transitions de vue ?
Cet article explique comment implémenter les transitions de vue sur quatre sites Web différents: RedBus (voyage), CyberAgent (éditeur d'actualités/de blog), Nykaa (e-commerce) et PolicyBazaar (assurance). Il décrit également les avantages qu'ils ont apportés à leurs sites Web grâce à l'API View Transitions.
redBus
Basé à Bangalore, en Inde, redBus est un site Web de réservation et de billetterie de bus qui fait partie du groupe MakeMyTrip. Il est présent dans différentes zones géographiques du monde. Il a été l'un des premiers sites Web à mettre en œuvre une expérience à l'aide de l'API View Transitions.
Pourquoi Redbus a-t-il implémenté des transitions de vue ?
L'équipe redBus croit fermement qu'il est possible d'offrir une expérience Web unifiée, semblable à celle d'une application, et aussi proche que possible de ses applications natives. D'ailleurs, elle avait implémenté plusieurs solutions personnalisées au fil des ans. Par exemple, l'équipe a déployé des animations personnalisées basées sur JavaScript et CSS pour les transitions de page, même avant le développement de l'API View Transitions. Elle a toutefois dû gérer les performances sur les segments inférieurs du réseau et des appareils, ce qui a parfois entraîné une expérience différentielle avec une stratégie de chargement adaptatif.
redBus a utilisé des transitions d'affichage pour plusieurs parcours utilisateur. Par exemple, dans la section d'auto-assistance de son application mobile, qui ouvre des pages Web dans des onglets Chrome personnalisés, et dans l'entonnoir de réservation de billets de bus, où les utilisateurs passent de la fiche d'inventaire à la page de paiement. Dans le second cas, les transitions de vue ont rendu la navigation d'une page à l'autre plus fluide et ont entraîné une augmentation du taux de conversion. Cela était dû à une meilleure expérience utilisateur et à de meilleures performances perçues lors de l'exécution des opérations les plus lourdes, telles que l'extraction de l'inventaire disponible le plus récent.
Détails techniques de l'implémentation
redBus utilise React et EJS comme pile technologique d'interface, avec une combinaison de SPA et d'APM pour différents parcours. L'extrait de code suivant montre comment les transitions de vue sont utilisées:
/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
if(document.startViewTransition) {
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
})
} else {
reactHistory ? reactHistory.push(url) : (window.location.href = url);
}
};
/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
if(document.startViewTransition) {
document.documentElement.classList.add('back-transition');
let viewTransition = document.startViewTransition();
viewTransition.ready.finally(() => {
reactHistory ? reactHistory.goBack() : history.back();
})
viewTransition.finished.finally(() => {
document.documentElement.classList.remove('back-transition');
})
} else {
reactHistory ? reactHistory.goBack() : history.back();
}
};
Dans les fichiers CSS suivants, slide-to-right, slide-to-left, slide-from-right et slide-from-left sont des images clés d'animation CSS.
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
Impact sur l'entreprise
redBus a choisi d'implémenter des transitions de vue en parallèle des efforts d'amélioration de l'INP sur son site, ce qui lui a permis d'augmenter ses ventes de 7%. Amit Kumar, responsable principal de l'ingénierie chez redBus, a déclaré que les transitions de vues étaient vraiment formidables pour ceux qui souhaitent réellement améliorer l'expérience utilisateur et réduire les frais de maintenance.
Nous avons organisé des sessions complètes de commentaires d'utilisateurs en tenant compte des informations précieuses provenant d'un groupe diversifié d'utilisateurs. Grâce à notre connaissance approfondie de notre base d'utilisateurs (bus et train) et de leurs besoins, ainsi qu'à notre expertise, nous sommes convaincus que cette fonctionnalité apportera une réelle valeur ajoutée dès le départ, sans nécessiter de tests A/B. Les transitions de vue nous permettent de combler l'écart entre les applications et le Web, en offrant une expérience de navigation fluide.
Anoop Menon, directeur de la technologie de redBus
CyberAgent
CyberAgent est une entreprise informatique basée au Japon qui propose de nombreux services en ligne, y compris des publications de blogs et d'actualités.
Pourquoi CyberAgent a-t-il implémenté des transitions de vue ?
Auparavant, CyberAgent avait envisagé d'utiliser des animations CSS ou un framework pour implémenter des transitions animées afin d'améliorer l'expérience utilisateur. Toutefois, il s'inquiétait des mauvaises performances du rendu du DOM et de la gestion du code. Lorsque Chrome a ajouté la compatibilité avec l'API View Transitions, l'équipe était ravie de l'utiliser pour créer des transitions de page attrayantes qui ont surmonté ces difficultés.
CyberAgent a implémenté des transitions d'affichage entre la liste des blogs et la page du blog. Ici, notez comment il a ajouté la transition d'élément à l'image de héros. Vous pouvez accéder au site et le découvrir en ligne dès aujourd'hui.
Elle a également utilisé des requêtes média afin de concevoir différentes expériences d'animation pour différents appareils. Pour les pages mobiles, elle incluait des transitions d'éléments, mais cet effet générait trop de mouvement sur les ordinateurs de bureau.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Détails techniques de l'implémentation
CyberAgent utilise Next.js pour créer son application monopage. L'exemple de code suivant montre comment ces groupes utilisent l'API View Transition.
export const usePageTransition = () => {
const router = useRouter();
const defferedRef = useRef<Deferred | null>(null);
useEffect(() => {
const handleRouteChangeComplete = () => {
defferedRef.current?.resolve();
};
const handleRouteChangeStart = (url: string) => {
if (!("startViewTransition" in document)) return;
if (router.asPath === url) return;
const deffered = new Deferred();
defferedRef.current = deffered;
(document as Document).startViewTransition(async () => {
await deffered.promise;
});
};
router.events.on("routeChangeStart", handleRouteChangeStart);
router.events.on("routeChangeComplete", handleRouteChangeComplete);
return () => {
router.events.off("routeChangeStart", handleRouteChangeStart);
router.events.off("routeChangeComplete", handleRouteChangeComplete);
};
}, [router.asPath]);
};
Découvrez d'autres exemples de code Next.js.
Afficher les transitions pour MPA avec technologie de prérendu
CyberAgent a également essayé notre nouvelle API View Transitions pour les applications multipages (MPA) (actuellement sous l'indicateur chrome://flags/#view-transition-on-navigation) sur un service appelé Ameba News, un portail d'actualités.
Les transitions d'affichage ont été utilisées à deux endroits: la première permet de modifier les catégories d'actualités présentées dans la vidéo suivante.
La seconde se situe entre la page de sélection de l'actualité, où un extrait du contenu est affiché, et lorsque l'utilisateur clique sur Afficher plus de détails, le reste de l'article apparaît en fondu.
Le point intéressant est qu'ils n'ont ajouté une animation qu'à la partie qui change après un clic sur le bouton. Ce petit ajustement de la conception de l'animation fait en sorte que la page MPA ressemble davantage à une SPA du point de vue de l'utilisateur. Seul le nouveau contenu s'anime dans:
Voici comment elle a procédé: elle a attribué un view-transition-name différent aux différentes parties de la page. Par exemple, il a attribué un view-transition-name à la partie supérieure de l'article, un autre pour la partie inférieure, et n'a ajouté aucune animation à la partie supérieure.
::view-transition-old(root) {
animation:
var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
}
::view-transition-new(root) {
animation:
var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}
Autre point intéressant concernant l'utilisation de l'API View Transitions par CyberAgent : l'API quicklink permet d'implémenter facilement des règles de prérendu sur la page d'informations. Voici l'exemple de code correspondant:
import { prerender } from ‘https://.../quicklink.mjs’;
window.addEventListener('load', () => {
const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
if (!match) return;
const [_, dirname, entryId] = match;
prerender(`/${dirname}/${entryId}/`);
});
Pour en savoir plus sur l'implémentation de QuickLink, consultez cet article.
Témoignage
Kazunari Hara, responsable technique du service Ameba dans CyberAgent, a déclaré que les transitions d'affichage pourraient avoir un impact important sur l'entreprise, et ce pour deux raisons.
Premièrement, elles guident les utilisateurs sur la page. Les transitions d'affichage permettent de rediriger visuellement les utilisateurs sur le message le plus important et de les aider à exploiter tout le potentiel de la page Web. De plus, elles améliorent et mettent en valeur la marque grâce à des animations. CyberAgent a défini une conception d'animation désignée pour communiquer sa marque. Grâce aux transitions de vue, l'entreprise peut implémenter cette expérience de marque sans augmenter les coûts liés à la gestion de bibliothèques externes.
Les transitions de vues sont l'une de mes API préférées. La possibilité d'ajouter des animations en tant que fonctionnalité standard du navigateur facilite l'implémentation et la gestion des transitions de vue par rapport à d'autres solutions qui dépendent de bibliothèques. Nous avons hâte d'implémenter des transitions d'affichage vers d'autres services afin de présenter notre marque.
Kazunari Hara, directeur de la technologie d'Ameba
Nykaa
Nykaa est la plus grande plate-forme d'e-commerce dans le secteur de la mode et de la beauté en Inde. Son objectif est de rendre l'expérience Web mobile aussi proche que possible de l'expérience de son application native. Lors de la tentative d'implémentation d'animations de transition, l'équipe avait du mal à écrire du code JavaScript personnalisé complexe. Cela a également eu un impact marginalisé sur les performances de leur site Web.
Pourquoi Nykaa a-t-il implémenté des transitions de vue ?
Avec l'arrivée des transitions de vue, l'équipe de Nykaa a compris que ces transitions étant disponibles en mode natif, l'expérience utilisateur des transitions de pages pouvait être considérablement améliorée, sans que cela n'affecte les performances. Nykaa utilise beaucoup les transitions d'affichage pour passer de la page d'informations détaillées sur le produit à la page des fiches produit.
Détails techniques de l'implémentation
Nykaa a utilisé React et Emotion pour créer son application monopage. Pour consulter d'autres exemples de code expliquant comment utiliser les transitions de vues avec React, cliquez ici.
if (document.startViewTransition) {
document.startViewTransition(() => {
history.push(productUrl);
});
} else {
history.push(productUrl);
}
const fadeIn = keyframes`
from { opacity: 0; }
`;
const fadeOut = keyframes`
to { opacity: 0; }
`;
const slideFromRight = keyframes`
from { transform: translateX(300px); }
`;
const slideToLeft = keyframes`
to { transform: translateX(-300px); }
`;
const slideToRight = keyframes`
to { transform: translateX(300px); }
`;
const slideFromLeft = keyframes`
from { transform: translateX(-300px); }
`
Code CSS pour l'animation du panneau latéral:
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}
::view-transition-new(root) {
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}
.back-transition {
display: inherit;
}
.back-transition::view-transition-old(root) {
animation-name: fade-out, ${slideToRight};
}
.back-transition::view-transition-new(root) {
animation-name: fade-in, ${slideFromLeft};
}
Témoignage
Sunit Jindal, responsable des applications chez Nykaa, a déclaré que le principal avantage de la transition des vues était la "perception de la vitesse". Nykaa a utilisé les effets de scintillement pour attendre le chargement du contenu depuis le backend. Toutefois, l'affichage de l'effet de scintillement ne permettait pas aux utilisateurs d'attendre le chargement du contenu. Avec les transitions d'affichage, la transition elle-même donnait aux utilisateurs l'impression que "quelque chose était sur le point de se produire", ce qui a rendu l'attente moins pénible.
Nykaa a été très enthousiaste vis-à-vis de la nouvelle expérience utilisateur améliorée de sa page Web avec transitions d'affichage, et elle est prête à implémenter des transitions d'affichage sur d'autres pages. Voici ce qu'en dit le vice-président de la conception:
Nous nous engageons à implémenter des transitions de vue dans toutes les fonctionnalités à venir, le cas échéant. Certains domaines ont déjà été identifiés et l'équipe y investit activement.
Krishna R V, vice-présidente de la conception
PolicyBazaar
Basée à Gurgaon, PolicyBazaar est le plus grand agrégateur d'assurances et société multinationale de technologies financières en Inde.
Pourquoi PolicyBazaar a-t-il implémenté des transitions de vue ?
En tant qu'entreprise Web-first, l'équipe de PolicyBazaar a toujours cherché à offrir la meilleure expérience utilisateur possible tout au long de son parcours critique. Avant même le lancement de l'API View Transitions, il était courant d'implémenter des transitions personnalisées à l'aide de JavaScript et de CSS. En effet, cette API permettait d'améliorer l'expérience utilisateur, de créer un flux de navigation fluide et d'améliorer l'attrait visuel global des sites Web.
Cependant, ces implémentations personnalisées ont engendré des retards occasionnels liés aux performances, des complexités liées à la maintenance du code et une compatibilité non optimale avec les frameworks utilisés. L'API View Transitions lui a permis de surmonter la plupart de ces problèmes en fournissant une interface facile à utiliser offrant des avantages en termes de performances disponibles en mode natif.
PolicyBazaar a utilisé des transitions de vue entre différents éléments dans son parcours avant le devis pour inciter les acheteurs potentiels à fournir les informations dont ils ont besoin pour souscrire une police d'assurance.
Détails techniques de l'implémentation
Elle utilise une approche de framework hybride, dans laquelle Angular et React dominent la majeure partie de son codebase. Voici l'extrait vidéo du code écrit dans Angular et partagé par Aman Soni (responsable de l'interface utilisateur PolicyBazaar):
toggleWidgetAnimation() {
let doc:any = document;
if (!doc.startViewTransition) {
this.toggleWidget();
return;
}
doc.startViewTransition(() => this.toggleWidget());
}
toggleWidget() {
let badgeEle = document.querySelector('.animate_init_state_one');
let textEle = document.querySelector('.animate_init_state_two');
badgeEle.classList.toggle('hide');
textEle.classList.toggle('hide');
}
Témoignage
Rishabh Mehrotra, responsable de la conception (Life BU), a déclaré que les transitions de vue ont joué un rôle important dans l'amélioration de l'expérience du site Web pour leurs utilisateurs en améliorant la convivialité, l'engagement et la satisfaction globale. Il a contribué à offrir une navigation fluide, des interactions guidées, une charge cognitive réduite, une esthétique moderne et bien plus encore.
Améliorer l'expérience Web est un objectif primordial pour PB, et le VT s'est révélé un outil essentiel pour y parvenir avec une fluidité remarquable. Son attrait généralisé au sein de notre communauté de développeurs et de notre base d'utilisateurs a suscité l'enthousiasme de notre équipe. Alors que nous envisageons son intégration dans différents POD, nous prévoyons un impact positif considérable sur les niveaux de satisfaction et l'excellence opérationnelle.
Saurabh Tiwari (CTO, PolicyBazaar)
Étapes suivantes
Vous souhaitez tester les transitions d'affichage ? Vous trouverez ci-dessous quelques ressources qui vous permettront d'en savoir plus: