View Transitions

Definition

API qui anime automatiquement les transitions entre deux états du DOM (SPA) ou entre pages (MPA). Le navigateur capture un snapshot avant/après et anime la différence.

Analogie

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

Exemple de code

/* Déclencher une transition */
document.startViewTransition(() => updateDOM());
/* Personnaliser l'animation */
::view-transition-old(hero) { animation: fade-out 0.3s; }
::view-transition-new(hero) { animation: fade-in 0.3s; }
.hero { view-transition-name: hero; }

Cas d'usage

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

Termes lies