Guide de lecture localisé
vercel-react-view-transitionsObjectif, utilisation et source
Guide pour implémenter des animations fluides et naturelles à l'aide de l'API de transition de vue de React ( component, type de transition ajouter, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, début de la transition de vue, ViewTransition, types de transition, ou demandes concernant l'animation entre les états d'interface utilisateur dans React sans bibliothèques d'animation tierces.
Source récupérée:
- Dépôt source
- vercel-labs/agent-skills
- SKILL.md
skills/react-view-transitions/SKILL.md- Étoiles du dépôt
- 33,269
- Mise à jour du dépôt
- 2026-10-29
- Catégories de capacités
- Développement
- Dernière collecte
Licence : Non précisé
Les extraits de flux de travail sont des outils de lecture et non des instructions exécutables de Codez. Aucune compétence tierce n'a été utilisée pour générer cette page.
Les passages relatifs à l'objectif et au flux de travail ci-dessous constituent le contenu original, organisé et traduit pour la lecture. Ils sont distincts de l'analyse éditoriale de Codez, qui est étiquetée séparément.
À quoi sert cette compétence ?
Guide pour implémenter des animations fluides et naturelles à l'aide de l'API de transition de vue de React ( component, type de transition ajouter, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, début de la transition de vue, ViewTransition, types de transition, ou demandes concernant l'animation entre les états d'interface utilisateur dans React sans bibliothèques d'animation tierces.
Comment fonctionne le flux de travail en amont
Flux de travail de mise en œuvre
Lors de l'ajout de transitions de vue à une application existante, suivez les instructions.references/implementation.mdétape par étape. Commencez par l'audit – ne le négligez pas. Utilisezreferences/css-recipes.mdpour le CSS applicable et l'adapter à l'application.
passage en amont · L51 ↗Quand animer
Chaque élément doit communiquer une relation spatiale ou une continuité. Si vous ne pouvez pas expliquer ce qu'il communique, ne l'ajoutez pas. Implémentez tous les modèles applicables de cette liste, dans cet ordre : il s'agit d'un ordre d'implémentation, et non d'une liste à choisir. Implémentez tous les modèles pertinents pour l'application. N'omettez un modèle que si l'application n'en a pas l'utilité.
passage en amont · L14 ↗Transitions de vue React
Animer les transitions entre les états de l'interface utilisateur à l'aide des fonctionnalités natives du navigateur.document.startViewTransition. Déclarez *quoi* avec , trigger *when* with début de transition / utiliserDeferredValue / Suspense : contrôlez *comment* l’animation grâce aux classes CSS. Les navigateurs non compatibles ignorent les animations avec élégance.
import { ViewTransition } from 'react';
<ViewTransition>
<Component />
</ViewTransition>Configuration requise
Aucun extrait de configuration n'a été sélectionné dans ce fichier. Cela ne signifie pas que la compétence est sans dépendances. Consultez les instructions de configuration du dépôt et les fichiers référencés.
Limites et contrôles de qualité
Limitation VT imbriquée
Lorsqu'un parent VTmounts/unmountsConstituée d'une seule unité avec des VT imbriquées, ces dernières ne s'activent pas individuellement.enter/exitSeul le VT le plus externe s'anime. (Un VT enfant monté à l'intérieur d'un VT parent *persistant* se déclenche.)enter/exit(normalement.) Les animations décalées par élément lors de la navigation entre les pages ne sont actuellement pas disponibles dansNext.js; voir la section dépannage pour connaître l'état expérimental en amont.
passage en amont · L304 ↗Commencez par un essai sans danger
- Vérifiez l'hôte pris en charge et les instructions d'installation du dépôt. Conservez le répertoire Skill ainsi que ses scripts, ressources et documentation référencés ;SKILL.mdSeul, il peut omettre les dépendances.
- Indiquez à l'agent vos paramètres d'entrée réels, le résultat souhaité et les critères d'acceptation. La syntaxe d'appel et les outils disponibles dépendent du système hôte ; ce site ne propose pas de commande d'installation universelle.
- Testez le flux de travail source dans un projet temporaire ou sur une copie. Avant d'autoriser les opérations qui modifient des fichiers, des services distants ou des ressources facturables, examinez-les attentivement.
- Vérifiez la conformité du résultat avec les contrôles qualité sources et vos propres exigences. Un déclenchement réussi ou un nombre élevé d'étoiles dans le dépôt ne garantissent pas un résultat correct.
Pour en savoir plus, consultez la source.
- Transitions de vue React
- Quand animer
- Choisir un style d'animation
- Disponibilité
- Flux de travail de mise en œuvre
- Le « composant »
- Déclencheurs d'animation
- Règle de placement critique
- Accessoires
- Pseudo-éléments CSS
- Types de transition
router.back()et bouton Retour du navigateur- Types et suspense
- Préparation des éléments partagés
- Transitions d'éléments partagés
- Réorganiser la liste
- Morph de déplacement de la mise en page
- Composition d'éléments partagés avec identité de liste
- Forcer la réentrée avec
key - Suspense Retour au contenu
- Comment plusieurs VT interagissent
- Utiliser
default="none"Délibérément - Deux modèles coexistent
- Limitation VT imbriquée
- Next.jsIntégration
- Accessibilité
- Fichiers de référence
- Document compilé complet
Compétences connexes
Traduction et étendue
Ce guide de lecture sélectionne des passages de l'amont épingléSKILL.mdCette traduction est assistée. Elle ne constitue pas un manuel complet et ne garantit pas une compatibilité testée. Veuillez lire le document original et les fichiers auxquels il fait référence avant utilisation.
Cette introduction fait référence à la version épinglée ci-dessous ; l’activité actuelle du dépôt et la durée de la collecte sont indiquées séparément.
- Source épinglée
- Lire l'original ↗
- Source récupérée
- Commit source
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62- Source SHA-256
693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a