View Transitions API : exemples en direct pour SPA et multipage | We.Inc
Exemples fonctionnels de la View Transitions API : startViewTransition sur une liste que vous pouvez mélanger, éléments nommés qui se transforment, @view-transition entre pages, types, React et compatibilité.
Exemples de la View Transitions API
La View Transitions API anime le passage entre deux états d'une page. Dans une application monopage, encapsulez la mise à jour du DOM dans document.startViewTransition(() => update()). Entre des pages de même origine, ajoutez @view-transition { navigation: auto; } aux deux pages. Donnez à un élément un view-transition-name unique et le navigateur le fait passer de son ancienne position à la nouvelle.
Deux types de view transition
Même document (SPA)
Entre documents (MPA)
Comment la déclencher
document.startViewTransition()
@view-transition { navigation: auto; } sur les deux pages
Chrome et Edge
111 et suivants
126 et suivants
Safari
18 et suivants
18.2 et suivants
Firefox
144 et suivants
Pas encore pris en charge
Baseline
Récemment disponible (octobre 2025)
Pas Baseline
La plupart des explications sur les view transitions décrivent l'arbre de pseudo-éléments et s'arrêtent là. Cette page commence par une démo fonctionnelle dans votre navigateur : mélangez une grille, ouvrez une carte en vue détaillée et regardez les éléments nommés se déplacer. Elle donne ensuite le code de chaque modèle, la configuration entre pages et les solutions de repli pour les navigateurs sans support.
Appuyez sur Mélanger pour réordonner la grille. Chaque tuile a son propre view-transition-name, chacune glisse donc vers sa nouvelle place.
Cliquez sur une tuile pour l'ouvrir. Le bloc de couleur et le titre se transforment en vue détaillée car ils partagent les mêmes noms.
Si votre navigateur ne dispose pas de l'API, la démo se met quand même à jour instantanément et vous le signale.
Copiez les extraits ci-dessous pour JavaScript pur, React et les sites multipages.
Chaque view-transition-name de la page doit être unique au moment de la capture. Un doublon fait rejeter la promesse ready et la transition est sautée.
Utilisez view-transition-name: match-element dans une transition de même document pour nommer automatiquement chaque élément d'une liste.
Récupérez les données avant d'appeler startViewTransition. Le rendu est figé pendant l'exécution du callback de mise à jour, un callback lent ressemble donc à un blocage.
Vérifiez la présence de document.startViewTransition avant de l'appeler, et exécutez simplement la mise à jour s'il manque.
Atténuez les animations dans une requête prefers-reduced-motion: reduce ; le changement d'état a quand même lieu.
Questions fréquentes
Que fait document.startViewTransition ?
Il capture la page actuelle, exécute votre callback de mise à jour, puis anime le passage de l'ancienne capture au nouvel état réel. Il renvoie un objet ViewTransition avec les promesses ready, finished et updateCallbackDone et une méthode skipTransition().
Comment ajouter des view transitions entre des pages ?
Placez @view-transition { navigation: auto; } dans le CSS de la page que vous quittez et de celle où vous arrivez. Les pages doivent partager la même origine, et vous obtenez par défaut un fondu enchaîné. Donnez le même view-transition-name aux éléments correspondants sur les deux pages pour les transformer de l'un à l'autre.
Les view transitions fonctionnent-elles dans Firefox ?
Les transitions de même document fonctionnent depuis Firefox 144. Les transitions entre documents n'étaient pas prises en charge par Firefox au moment de la rédaction : sur ces navigateurs, la navigation se fait simplement sans animation.
Comment utiliser les view transitions dans React ?
Appelez document.startViewTransition et mettez à jour l'état dans flushSync de react-dom, pour que React écrive le nouveau DOM de façon synchrone avant que le navigateur prenne la nouvelle capture.
Comment personnaliser l'animation ?
Stylisez les pseudo-éléments. ::view-transition-old(name) est la capture sortante, ::view-transition-new(name) la capture entrante, et ::view-transition-group(name) contrôle la taille et la position. Utilisez root comme nom pour la page entière.
Ce qui se passe pendant une transition
Le navigateur capture l'état actuel sous forme d'images, une pour la page et une pour chaque élément nommé. Il exécute votre mise à jour pendant que le rendu est en pause, puis capture le nouvel état.
Il construit au-dessus de la page un arbre de pseudo-éléments : un groupe par nom, contenant une ancienne et une nouvelle image. Par défaut, le groupe anime la taille et la position pendant que les deux images se fondent l'une dans l'autre, ce qui crée l'effet de transformation.
Bien nommer les éléments
Un nom relie un élément de l'ancien état à un élément du nouvel état. Une photo produit dans une liste et la grande photo de sa page détail peuvent partager un nom comme product-42, et le navigateur anime l'une en l'autre.
Ne définissez le nom que là où c'est nécessaire. Nommer un élément qui ne change pas coûte quand même une capture séparée.
Des types selon la direction
startViewTransition accepte aussi un objet d'options avec une fonction update et un tableau types. Un type comme forwards ou backwards peut ensuite être ciblé en CSS avec le sélecteur :active-view-transition-type(), pour que le retour en arrière glisse dans l'autre sens.
Pour les navigations entre pages, le descripteur types dans @view-transition définit les types de la même manière.
Transitions de même document
startViewTransition avec détection de support
Les navigateurs sans l'API exécutent directement la mise à jour, rien ne casse.
Transformer une miniature en image hero
Un seul élément peut porter le nom à un instant donné : définissez-le sur la miniature cliquée juste avant la transition.
React
startViewTransition avec flushSync
flushSync oblige React à valider le nouveau DOM dans le callback.
Transitions entre documents
Glisser d'une page à l'autre sur un site multipage
Ajoutez ceci à la feuille de style de chaque page concernée. Même origine uniquement.
Référence de l'API
Les éléments de la View Transitions API
Nom
Type
Ce qu'il fait
document.startViewTransition(update)
Méthode
Démarre une transition de même document et renvoie un ViewTransition
ViewTransition.ready
Promesse
Se résout quand les pseudo-éléments existent et que l'animation va commencer
ViewTransition.finished
Promesse
Se résout quand l'animation se termine et que le nouvel état est actif
ViewTransition.updateCallbackDone
Promesse
Se résout quand votre callback de mise à jour est terminé
ViewTransition.skipTransition()
Méthode
Saute l'animation ; la mise à jour s'exécute quand même
Propriété CSS
Donne à un élément sa propre capture à transformer
@view-transition
Règle @ CSS
Active les transitions entre documents pour une page
::view-transition-old() / -new()
Pseudo-éléments
Les captures sortante et entrante
::view-transition-group()
Pseudo-élément
Anime la taille et la position pour un nom
pageswap / pagereveal
Événements
Permettent à un script d'ajuster une transition entre documents
Port
Prairie
Braise
Crépuscule
Ardoise
Corail
La réduction des animations est activée, le changement a donc été instantané.
Votre navigateur ne prend pas en charge les view transitions, le changement a donc été instantané.
Démo en direct
Mélangez la grille ou ouvrez une carte. Chaque tuile a son propre view-transition-name, le navigateur l'anime donc jusqu'à sa nouvelle position.
Mélanger
Retour à la grille
Le bloc de couleur et le titre se sont transformés depuis la grille car ils gardent ici les mêmes noms.