Publié le : 27 mars 2026
Chrome 147 introduit les transitions de vue à portée d'élément, une fonctionnalité qui vous permet de démarrer une transition de vue sur un sous-arbre du DOM en appelant Element.startViewTransition().
Cette fonctionnalité permet d'exécuter plusieurs transitions de vue simultanément, d'imbriquer les transitions de vue en cours et de résoudre les problèmes de superposition avec le contenu position: fixed, tout en conservant l'interactivité du reste de la page.
Qu'est-ce qui a changé ?
Depuis que nous avons annoncé que la fonctionnalité était prête pour les tests des développeurs dans Chrome 140, nous avons collaboré avec la communauté et le groupe de travail CSS pour finaliser les détails, en particulier en ce qui concerne les comportements par défaut :
- Par défaut, les racines de portée participent elles-mêmes.
- Les transitions de vue à portée limitée contiennent automatiquement leurs pseudos imbriqués à l'aide de groupes de transitions de vue imbriqués.
- Le pseudo-élément
::view-transition-group-children()dans une transition de vue à portée limitée coupe automatiquement son contenu si la racine de portée coupe son overflow. - Les transitions de vue à portée d'élément appliquent automatiquement
contain: layoutetview-transition-scope: allà la racine de portée pendant la transition.
Après ces mises à jour, les transitions de vue à portée d'élément sont disponibles dans la version stable de Chrome à partir de la version 147.
Démonstrations
Mélanger des listes
Cette démo vous permet de mélanger les éléments de chaque liste. Vous pouvez également inverser la position des listes en sélectionnant le bouton au centre.
Démo
Enregistrement de la démonstration
Comme des transitions de vue à portée d'élément sont utilisées, les deux listes peuvent exécuter leurs transitions de vue de lecture aléatoire simultanément. Vous pouvez également démarrer la transition de vue externe, qui inverse les positions des listes, tandis que les éléments de la liste sont toujours en cours de réorganisation.
Mon voyage en Patagonie
La démonstration "My Patagonia Trip" illustre les transitions de vue à portée d'élément. Cette démo a été créée à partir de la vidéo de la campagne "Web UX, re-imagined".
Utilisez les menus déroulants pour filtrer les éléments de la grille. Utilisez le bouton Ajouter sur chaque élément de la grille pour l'ajouter à la liste des éléments sélectionnés, qui s'affiche dans la barre latérale.
Démo
Pour afficher la démo complète, ouvrez "My Patagonia Trip" dans un onglet distinct.
Enregistrement de la démonstration
La démo utilise des transitions de vue à portée d'élément à trois endroits :
- Grille d'éléments lors du filtrage.
- Éléments de la grille lorsqu'ils sont ajoutés à la liste des éléments sélectionnés.
- Barre latérale affichant la liste des éléments sélectionnés.
Lire le guide
Pour en savoir plus sur les transitions de vue à portée d'élément, consultez le guide. Il vous montre comment implémenter des transitions de vue à portée d'élément, explique des détails supplémentaires et inclut d'autres démonstrations.