Dans les termes du Skill
Un guide pour animer les transitions entre états d'UI avec l'API View Transition de React : déclarer le quoi avec le composant ViewTransition, déclencher le quand avec startTransition, useDeferredValue ou Suspense, et contrôler le comment avec des classes CSS. Il couvre cinq patterns selon un ordre de priorité fixe, les morphs d'éléments partagés, l'identité de liste, le changement d'état et le changement de route, ainsi que la navigation directionnelle par type via addTransitionType et l'intégration avec le App Router de Next.js.
Il explique où une limite ViewTransition doit se situer, quand default="none" est requis, quels navigateurs le prennent en charge (Chromium 125+, Firefox 144+, Safari 18.2+) avec une dégradation gracieuse ailleurs, et renvoie vers des fichiers de référence pour l'ordre d'implémentation, les recettes CSS, les patterns et le dépannage.
Ce qu'il produit
- Un composant wrapper directionnel réutilisable qui contient les maps d'entrée et de sortie indexées par type pour les applications multi-pages.
- Des morphs d'éléments partagés créés en réutilisant le même nom sur les vues qui se démontent et celles qui se montent, par exemple une miniature qui devient une image hero.
- Des règles CSS ciblant les pseudo-éléments de view transition, y compris la paire d'images qui contient les deux snapshots.
- Une implémentation qui se dégrade proprement, où les navigateurs non pris en charge ignorent l'animation au lieu de casser la navigation.
Fonctionnement
- 01Déterminer ce que dit l'animation
N'ajoutez une limite que si vous pouvez formuler la relation spatiale ou la continuité qu'elle exprime. Si vous ne pouvez pas dire ce qu'elle communique, ne l'ajoutez pas.
- 02Enveloppez l'état dans une limite
React attribue un view-transition-name unique et appelle document.startViewTransition en coulisse, vous n'appelez donc jamais startViewTransition vous-même.
- 03Déclenchez-la avec une transition
L'entrée, la sortie, la mise à jour et le partage ne se déclenchent que depuis startTransition, useDeferredValue ou Suspense. Un simple setState n'animera rien.
- 04Stylez les snapshots en CSS
Les snapshots sortant et entrant sont ciblés via des pseudo-éléments de view transition portant vos propres noms de classe, le fichier de recettes fournissant des animations toutes prêtes.
- 05Marquez-la avec des types de transition
addTransitionType empile des types de contexte pour que différentes limites de l'arbre réagissent différemment, et un objet par type fait correspondre ces types à des classes CSS à l'entrée, à la sortie et au partage.