API View Transitions

L’API des transitions de vue (Chrome 111+) permet des transitions fluides et animées entre différents états d’une page ou entre des navigations de pages. Elle capture des captures d’écran avant et après, puis effectue une transformation progressive entre elles à l’aide d’animations CSS, ce qui permet d’obtenir des transitions de type application sur le Web.

Déclenchez une transition dans la même page en enveloppant une mise à jour du DOM dans document.startViewTransition(() => updateDom()). Le navigateur capture l’ancien état, exécute la mise à jour, capture le nouvel état, puis effectue automatiquement un fondu enchaîné entre les deux.

Sans aucun CSS, les transitions de vue effectuent un simple fondu enchaîné entre l’ancien et le nouvel état de la page. Cette seule ligne de JavaScript ajoute une transition soignée qui nécessitait auparavant une orchestration complexe d’animations CSS ou une bibliothèque d’animation dédiée.

L’API expose quatre pseudo-éléments : ::view-transition (superposition racine), ::view-transition-old(root) (capture d’écran de l’ancienne page), ::view-transition-new(root) (capture d’écran de la nouvelle page) et ::view-transition-image-pair(root). Personnalisez-les avec des animations CSS.

Attribuez view-transition-name: hero-image à un élément qui reste présent pendant la transition. L’API transforme progressivement cet élément depuis son ancienne position et sa taille initiale vers sa nouvelle position et sa nouvelle taille, créant automatiquement une animation fluide au niveau de l’élément.

Remplacez le fondu enchaîné par défaut par des images clés personnalisées sur les pseudo-éléments : faites glisser la nouvelle vue depuis la droite lors d’une navigation vers l’avant, et depuis la gauche lors d’un retour. Ciblez ::view-transition-new(root) et ::view-transition-old(root) avec @keyframes.

Les transitions de vue entre documents (Chrome 126+) animent les navigations complètes dans les applications multipages. Ajoutez @view-transition { navigation: auto; } au CSS : le navigateur gère automatiquement la transition entre les pages HTML, sans JavaScript.

Les utilisateurs présentant des troubles vestibulaires ne devraient pas subir de transitions riches en mouvements. Placez les animations de transition dans @media (prefers-reduced-motion: no-preference) afin de désactiver les animations personnalisées pour les utilisateurs qui préfèrent réduire les mouvements, tout en conservant la mise à jour fonctionnelle du DOM.

React Router v6.4+, Vue Router et Astro prennent en charge les transitions de vue. Les infrastructures enveloppent automatiquement les changements de route dans startViewTransition. Configurez les styles de transition pour chaque route avec view-transition-name sur les éléments persistants, comme la navigation et les structures de mise en page.

Les transitions de vue capturent des captures d’écran de la page, ce qui peut être coûteux pour les mises en page complexes. Les grandes pages comportant de nombreuses couches compositées peuvent subir des saccades pendant la capture. Limitez la durée de la transition à moins de 300 ms et évitez de faire transiter des sous-arbres extrêmement complexes.

Vérifiez la disponibilité de l’API avant de l’utiliser : if (!document.startViewTransition) { updateDom(); return; }. La solution de repli met normalement à jour le DOM, sans animation. Les transitions de vue sont une amélioration progressive : l’application fonctionne sans elles ; elles améliorent simplement l’expérience dans les navigateurs compatibles.

Que permet view-transition-name sur un élément pendant une transition de vue ?

L’API des transitions de vue permet de créer des animations de fondu enchaîné et de transformation entre des états du DOM ou des navigations de pages, avec très peu de code. Les éléments de transition nommés se transforment automatiquement ; les animations personnalisées de pseudo-éléments remplacent le fondu enchaîné par défaut. Respectez la préférence de réduction des mouvements et utilisez l’amélioration progressive pour les navigateurs non compatibles.