<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

Placer <ViewTransition> sous un nœud DOM (il doit englober directement le contenu animé) ou ignorer prefers-reduced-motion.

Termes liés

Dans l'actu

09/09 React 19.3 stabilise `<ViewTransition>` et `addTransitionType` (animations enter/exit/update/share via l'API View Transition, déclenchées par les Transitions) et les Fragment Refs : un ref sur `<Fragment>` renvoie un `FragmentInstance` avec écouteurs, focus, observers et mesures sur un groupe de nœuds frères. Bilan septembre 2026 →