Nouveautés concernant les transitions de vue (mise à jour 2025)

Bramus

Date de publication : 8 octobre 2025

Beaucoup de choses ont changé depuis que nous avons lancé les transitions de vue dans le même document en 2023.

En 2024, nous avons lancé les transitions de vue entre documents, ajouté des améliorations telles que view-transition-class et les types de transitions de vue, et nous avons également accueilli Safari qui a ajouté la prise en charge des transitions de vue.

Cet article vous présente les modifications apportées aux transitions de vue en 2025.

Meilleure compatibilité avec les navigateurs et les frameworks

Les transitions de vue dans le même document sont sur le point de devenir "Baseline Newly available"

L'API View Transitions est l'un des principaux domaines d'intérêt d'Interop 2025, en particulier les transitions de vue dans le même document avec document.startViewTransition(updateCallback), view-transition-class, le nommage automatique avec view-transition-name: match-element et le sélecteur CSS :active-view-transition.

Firefox prévoit d'inclure ces fonctionnalités dans la prochaine version 144 de Firefox, qui deviendra stable le 14 octobre 2025. Ces fonctionnalités seront alors disponibles dans la version de référence.

La prise en charge de l'API View Transitions est désormais intégrée à React

Tout au long de l'année, l'équipe React a travaillé à l'ajout de transitions de vue au cœur de React. Ils ont annoncé react@experimental la prise en charge en avril et, cette semaine, lors de la conférence React, ils ont déplacé la prise en charge vers react@canary, ce qui signifie que la conception est presque définitive.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

Pour en savoir plus, consultez la documentation <ViewTransition> de React ou regardez cette présentation d'Aurora Scharff pour une bonne introduction sur le sujet.

Fonctionnalités récemment déployées

Nommer automatiquement les éléments avec view-transition-name: match-element

Pour marquer un élément à inclure dans un instantané dans le cadre d'une transition de vue, vous lui attribuez un view-transition-name. C'est essentiel pour les transitions de vue, car cela permet d'utiliser des fonctionnalités telles que la transition entre deux éléments différents. Chaque élément a la même valeur view-transition-name de chaque côté de la transition, et les transitions de vue s'occupent du reste.

Toutefois, nommer les éléments de manière unique peut devenir fastidieux lors de la transition de nombreux éléments qui ne changent pas vraiment. Si vous avez 100 éléments qui se déplacent dans une liste, vous devez trouver 100 noms uniques.

Grâce à match-element, vous n'avez pas besoin de faire tout cela. Lorsque vous utilisez cette valeur pour view-transition-name, le navigateur génère un view-transition-name interne pour chaque élément correspondant en fonction de l'identité de l'élément.

Cette approche est utilisée dans la démonstration suivante. Chaque fiche de la ligne reçoit un view-transition-name généré automatiquement.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

La carte qui entre ou sort reçoit un nom explicite. Ce nom est utilisé dans le CSS pour associer des animations spécifiques à cet instantané. Les instantanés de toutes les autres cartes sont stylisés à l'aide de view-transition-class qui leur est associé.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

Les outils de développement affichent désormais les règles ciblant les pseudos qui utilisent un view-transition-class.

Pour déboguer les transitions de vue, vous pouvez utiliser le panneau "Animations" des outils de développement pour mettre en pause toutes les animations. Vous avez ainsi le temps d'inspecter les pseudo-éléments sans avoir à vous soucier de l'état final de la transition de vue. Vous pouvez même faire défiler manuellement les timelines de l'animation pour voir comment se déroulent les transitions.

Auparavant, lorsque vous inspectiez l'un des pseudo-éléments ::view-transition-*, les outils pour les développeurs Chrome n'exposaient pas les règles ciblant les pseudos à l'aide de leur view-transition-class défini. Cette fonctionnalité a été ajoutée dans Chrome 139.

Les groupes de transition de vue imbriqués sont disponibles à partir de Chrome 140.

Lorsqu'une transition de vue s'exécute, elle affiche les éléments instantanés dans une arborescence de pseudo-éléments. Par défaut, l'arborescence générée est "plate". Cela signifie que la hiérarchie d'origine dans le DOM est perdue et que tous les groupes de transition de vue capturés sont des frères et sœurs sous un seul pseudo-élément ::view-transition.

Cette approche d'arborescence plate est suffisante pour de nombreux cas d'utilisation, mais devient problématique lorsque des effets visuels tels que le clipping ou les transformations 3D sont utilisés. Celles-ci nécessitent une certaine hiérarchie dans l'arborescence.

Grâce à la fonctionnalité Groupes de transitions de vue imbriqués, vous pouvez désormais imbriquer des pseudo-éléments ::view-transition-group les uns dans les autres. Lorsque les groupes de transition de vue sont imbriqués, il est possible de restaurer des effets tels que le clipping pendant la transition.

Découvrez comment utiliser les groupes de transition de vue.

Les pseudo-éléments héritent désormais de davantage de propriétés d'animation

Lorsque vous définissez l'une des propriétés détaillées animation-* sur un pseudo-élément ::view-transition-group(…), les éléments ::view-transition-image-pair(…), ::view-transition-old(…) et ::view-transition-new(…) contenus héritent également de cette propriété. C'est pratique, car cela permet de synchroniser automatiquement le fondu enchaîné entre ::view-transition-new(…) et ::view-transition-old(…) avec ::view-transition-group(…).

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

Initialement, cet héritage était limité à animation-duration et animation-fill-mode (et plus tard à animation-delay), mais il a été étendu pour hériter de plus de propriétés d'animation.

Les navigateurs compatibles avec les transitions d'affichage devraient désormais contenir les éléments suivants dans leur feuille de style user-agent :

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Les pseudo-éléments héritant de plus de propriétés ont été déployés dans Chrome 140.

L'exécution du rappel de promesse finished n'attend plus de frame.

Lorsque vous utilisez la promesse finished pour exécuter un rappel, Chrome attendait qu'un frame soit produit avant d'exécuter cette logique. Cela peut entraîner un scintillement à la fin de l'animation lorsque le script déplace certains styles pour tenter de préserver un état visuellement similaire.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

Ce changement de timing corrige la situation en déplaçant les étapes de nettoyage de la transition de vue pour qu'elles s'exécutent de manière asynchrone une fois le cycle de vie terminé. Cela garantit que le cadre visuel produit lors de la résolution de la promesse finished conserve la structure de la transition de vue, évitant ainsi le scintillement.

Cette modification du timing a été déployée dans Chrome 140.

Fonctionnalités à venir

L'année n'est pas encore terminée, il reste donc encore du temps pour déployer d'autres fonctionnalités.

Les transitions de vue à portée limitée sont prêtes à être testées dans Chrome 140

Les transitions de vue à portée limitée sont une extension proposée à l'API View Transitions. Elles vous permettent de démarrer une transition de vue sur un sous-arbre du DOM en appelant element.startViewTransition() (au lieu de document.startViewTransition()) sur n'importe quel HTMLElement.

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.

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.

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.

La position de ::view-transition passera de fixed à absolute dans Chrome 142

Le pseudo ::view-transition est actuellement positionné à l'aide de position: fixed. Suite à une résolution du groupe de travail CSS, cette valeur sera remplacée par position: absolute.

Cette modification de la valeur position de fixed à absolute, qui sera disponible dans Chrome 142, n'est pas visible, car le bloc de contenu du pseudo-élément ::view-transition est de toute façon le bloc de contenu de l'instantané. Le seul effet observable est une valeur position différente lors d'une getComputedStyle.

document.activeViewTransition arrive dans Chrome 142

Lorsqu'une transition de vue est lancée, une instance ViewTransition est créée. Cet objet contient plusieurs promesses et fonctionnalités permettant de suivre la progression de la transition, ainsi que d'effectuer des manipulations telles que l'ignorer ou modifier ses types.

Au lieu de vous demander de suivre manuellement cette instance, Chrome fournit désormais une propriété document.activeViewTransition qui représente cet objet. Si aucune transition n'est en cours, sa valeur est null.

Pour les transitions de vue dans le même document, la valeur est définie lorsque vous appelez document.startViewTransition. Pour les transitions de vue entre documents, vous pouvez accéder à cette instance ViewTransition dans les événements pageswap et pagereveal.

La prise en charge de document.activeViewTransition sera bientôt disponible dans Chrome 142.

Empêcher une transition de vue de se terminer automatiquement avec ViewTransition.waitUntil

Une transition de vue atteint automatiquement son état finished lorsque toutes ses animations sont terminées. Pour éviter cette finalisation automatique, vous pourrez bientôt utiliser ViewTranistion.waitUntil. Lorsque vous transmettez une promesse, le ViewTransition n'atteint son état finished que lorsque cette promesse transmise est également résolue.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

Cette modification sera disponible plus tard dans l'année et permettra, par exemple, d'attendre un fetch ou de faciliter l'implémentation d'une transition de vue basée sur le défilement.

Étape suivante

Comme vous pouvez le voir, nous ne sommes pas restés les bras croisés depuis le lancement initial des transitions de vue en 2023. Nous avons hâte de proposer des transitions de vue limitées à l'avenir et, comme toujours, nous sommes ouverts à vos commentaires.

Si vous avez des questions sur les transitions de vue, contactez-nous sur les réseaux sociaux. Les demandes de fonctionnalités pour les transitions de vue peuvent être envoyées au CSS WG. Si vous rencontrez un bug, signalez-le dans Chromium pour nous en informer.