View Transitions

Définition

API qui anime automatiquement le passage entre deux états du DOM. document.startViewTransition() (même document, SPA) est Baseline « Newly available » depuis octobre 2025. La variante inter-documents (@view-transition { navigation: auto }) reste à disponibilité limitée.

Analogie

Comme un fondu enchaîné au cinéma entre deux scènes : le navigateur gère le morphing automatiquement.

Exemple de code

// SPA : Baseline depuis octobre 2025
document.startViewTransition(() => updateDOM());

/* CSS
.hero { view-transition-name: hero; }
::view-transition-old(hero) { animation: fade-out 0.3s; }
::view-transition-new(hero) { animation: fade-in 0.3s; }

// MPA (disponibilité limitée) :
@view-transition { navigation: auto; }
*/

Cas d'usage

Animer les changements de page ou les transitions de composants pour une UX fluide type app native.

Anti-pattern

Supposer que les transitions inter-pages (@view-transition) marchent partout : seule la version même-document est Baseline.

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 →