vercel-react-view-transitions
Ajouter des transitions de vue natives aux applications React
L'ajout de transitions de page fluides et d'animations d'éléments partagés aux applications React nécessite de comprendre l'API View Transitions et ses schémas d'intégration. Cette compétence fournit des conseils étape par étape, des recettes CSS et des motifs Next.js provenant de Vercel Labs.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "vercel-react-view-transitions". Ajouter des transitions à ma liste de produits
Résultat attendu:
Enveloppez vos articles de produit dans <ViewTransition> avec des clés uniques, ajoutez du CSS pour les pseudo-éléments ::view-transition-old/new, et utilisez startTransition pour déclencher les animations lors des changements d'état.
Utilisation de "vercel-react-view-transitions". Pourquoi le bouton précédent du navigateur n'anime-t-il pas ?
Résultat attendu:
Les boutons précédent/suivant du navigateur utilisent des événements popstate synchrones, qui sont incompatibles avec startViewTransition. Utilisez router.push() avec des URLs explicites à la place pour maintenir la prise en charge des animations.
Utilisation de "vercel-react-view-transitions". Comment animer la réorganisation d'une liste ?
Résultat attendu:
Attribuez des valeurs view-transition-name uniques à chaque article en utilisant leur ID. Lorsque les articles se réorganisent, le navigateur capture automatiquement le changement de position et l'anime en douceur.
Audit de sécurité
SûrAll static findings are false positives. The skill is legitimate documentation from Vercel Labs for implementing React View Transitions. No malicious code patterns exist. All 781 flagged instances are benign keyword matches in markdown documentation (backticks for code formatting, words like 'keystroke' in UI context, TypeScript type names, and standard documentation URLs).
Score de qualité
Ce que vous pouvez construire
Ajouter des transitions de page à Next.js App
Implémenter des transitions de glissement fluides lorsque les utilisateurs naviguent entre les routes dans une application Next.js utilisant l'App Router et le flag expérimental viewTransition.
Créer des animations d'éléments partagés
Permettre aux images de produits de se transformer en douceur d'une carte de grille vers une vue de page de détail, créant une sensation premium comme les applications mobiles natives.
Animer les états de chargement des données
Remplacer les flashes de contenu brut par des révélations Suspense fluides qui animent gracieusement l'apparition du contenu après les récupérations de données.
Essayez ces prompts
Ajouter des transitions de vue à mon application Next.js afin que les pages glissent lors de la navigation
J'ai une grille de produits. Lorsque je clique sur un produit, l'image devrait s'animer de la grille vers le hero de la page de détail
Mes transitions de vue se cassent lorsque Suspense se résout. Comment empêcher les animations imbriquées d'interférer avec les transitions de page ?
Implémenter des animations de navigation avant et arrière qui glissent dans des directions opposées afin que les utilisateurs ressentent la profondeur spatiale dans mon application
Bonnes pratiques
- Commencez par l'étape d'audit - identifiez tous les endroits nécessitant des transitions avant d'écrire du code
- Copiez les recettes CSS de la compétence plutôt que d'écrire des animations personnalisées à partir de zéro
- Testez toujours avec les préférences de mouvement réduit et une dégradation gracieuse pour les navigateurs plus anciens
Éviter
- N'appelez pas document.startViewTransition() directement - laissez le composant ViewTransition le gérer
- Évitez les glissements directionnels pour la navigation latérale (onglets) - cela implique faussement une profondeur spatiale
- Neendez pas ViewTransition à l'intérieur d'une div - le composant doit être l'enveloppe extérieure pour permettre l'entrée/sortie