<ViewTransition> et addTransitionType

Définition

Composant stable depuis React 19.3 (9 septembre 2026), après une phase expérimentale annoncée le 23 avril 2025. Il anime les éléments qui entrent, sortent, se déplacent ou se partagent entre écrans en s'appuyant sur l'API View Transition du navigateur. Il ne se déclenche que dans une transition (startTransition, Suspense, useDeferredValue). addTransitionType permet de choisir l'animation selon la cause (navigation avant/arrière).

Analogie

Le fondu enchaîné d'un monteur vidéo, appliqué automatiquement entre deux plans de votre interface.

Exemple de code

import { ViewTransition, addTransitionType, startTransition } from 'react';

<ViewTransition
  enter={{ 'nav-forward': 'slide-left', 'nav-back': 'slide-right', default: 'auto' }}
  exit="auto"
>
  <Page />
</ViewTransition>

// Dans le routeur
startTransition(() => {
  addTransitionType('nav-' + direction);
  navigate(url);
});
/* CSS : ::view-transition-old(.slide-left) { animation: ... } */

Cas d'usage

Transitions de pages, agrandissement d'une vignette en plein écran (prop name partagée), apparition/disparition d'items de liste.

Anti-pattern

Termes liés

Sources

• react.dev/blog/2026/09/09/react-19-3
• react.dev/reference/react/ViewTransition
• react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more