Prêt pour les tests des développeurs : transitions de vue à portée limitée

Bramus

Publié le 10 septembre 2025

Les transitions de vue à portée limitée sont une extension proposée de l'API View Transitions qui vous permet de démarrer une transition de vue sur un sous-arbre du DOM. Cette fonctionnalité est prête à être testée à partir de Chrome 140, avec le flag "Experimental Web Platform features" activé dans chrome://flags. Nous sommes très attentifs aux commentaires des développeurs.

Introduction rapide

Pour démarrer une transition de vue à portée limitée, appelez element.startViewTransition() (au lieu de document.startViewTransition()) sur n'importe quel HTMLElement auquel contain: layout est appliqué.

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

Le résultat est une transition de vue limitée à la sous-arborescence de votre HTMLElement choisi, avec la pseudo-arborescence ::view-transition résultante injectée dans ce HTMLElement. HTMLElement sert de conteneur pour les animations de transition.

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

Les transitions à portée limitée permettent d'exécuter plusieurs transitions de vue en même temps (à condition qu'elles aient des racines de transition différentes). Les événements de pointeur sont empêchés uniquement sur ce sous-arbre (que vous pouvez réactiver), et non sur l'ensemble du document. De plus, ils permettent de peindre les éléments en dehors de la racine de la transition au-dessus de la transition de vue à portée.

Pour en savoir plus sur les transitions de vue à portée limitée, consultez l'explication sur les transitions de vue à portée limitée.

Démo

Dans la démo suivante, vous pouvez déplacer un point dans son conteneur en cliquant sur l'un des boutons. Vous pouvez le faire avec des transitions de vue à portée de document ou à portée d'élément, ce qui vous permet de voir comment elles se comportent différemment.

Démo

Enregistrement de la démonstration

Avec les transitions de vue à portée limitée, le point reste masqué par son parent pendant la transition. De plus, le point ne recouvre pas le pop-over lorsqu'il est affiché.

Nous aimerions avoir votre avis

Nous aimerions recueillir les commentaires de la communauté des développeurs Web sur les points suivants :

  • Forme de l'API Scoped View Transitions.
  • Cas d'utilisation où la fonctionnalité fonctionne bien ou ne fonctionne pas comme prévu.
  • Comment répondre aux questions sur les scopes auto-participatifs.

Partagez vos commentaires en commentant le problème 9890 du groupe de travail CSS. Familiarisez-vous avec les problèmes connus et les contraintes avant de nous faire part de vos commentaires.

Si vous rencontrez un bug, signalez-le dans Chromium pour nous en informer.