Lokalisierter Leseleitfaden
vercel-react-view-transitionsZweck, Verwendung und Quelle
Leitfaden zur Implementierung flüssiger, nativer Animationen mithilfe der View Transition API von React ( component, addTransitionType, 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, startViewTransition, ViewTransition, Übergangstypen oder fragt nach der Animation zwischen UI-Zuständen in React ohne Animationsbibliotheken von Drittanbietern.
Quelle abgerufen:
- Quell-Repository
- vercel-labs/agent-skills
- SKILL.md
skills/react-view-transitions/SKILL.md- Repository-Sterne
- 33,269
- Repository zuletzt aktualisiert
- 2026-10-29
- Fähigkeitskategorien
- Entwicklung
- Letzte Datenerfassung
Lizenz: Nicht angegeben
Die Workflow-Auszüge dienen als Lesehilfe und sind keine ausführbaren Anweisungen von Codez. Für die Erstellung dieser Seite wurde keine Drittanbieter-Skill verwendet.
Die folgenden Abschnitte zu Zweck und Arbeitsablauf sind vorgelagertes Material, das zur besseren Lesbarkeit aufbereitet und übersetzt wurde. Sie unterscheiden sich von der separat gekennzeichneten redaktionellen Analyse von Codez.
Was diese Fähigkeit bewirkt
Leitfaden zur Implementierung flüssiger, nativer Animationen mithilfe der View Transition API von React ( component, addTransitionType, 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, startViewTransition, ViewTransition, Übergangstypen oder fragt nach der Animation zwischen UI-Zuständen in React ohne Animationsbibliotheken von Drittanbietern.
Wie der vorgelagerte Workflow funktioniert
Implementierungs-Workflow
Beim Hinzufügen von Ansichtsübergängen zu einer bestehenden App beachten Sie bitte Folgendes:references/implementation.mdSchritt für Schritt. Beginnen Sie mit dem Audit – überspringen Sie es nicht.references/css-recipes.mdfür das entsprechende CSS und passen Sie es an die App an.
Aufwärtspassage · L51 ↗Wann animieren?
Jedes „ sollte eine räumliche Beziehung oder Kontinuität verdeutlichen. Wenn Sie nicht genau beschreiben können, was es aussagt, fügen Sie es nicht hinzu. Implementieren Sie alle zutreffenden Muster aus dieser Liste in dieser Reihenfolge: Dies ist eine Implementierungsreihenfolge, keine Auswahlliste. Implementieren Sie jedes Muster, das zur Anwendung passt. Überspringen Sie ein Muster nur dann, wenn die Anwendung keinen Anwendungsfall dafür hat.
React View Transitions
Animieren Sie zwischen UI-Zuständen mithilfe der nativen Browserfunktionen.document.startViewTransition. Deklarieren Sie *was* mit , trigger *when* with Übergang starten / useDeferredValue / Spannung erzeugen, mit CSS-Klassen steuern, *wie* Animationen ablaufen. Nicht unterstützte Browser überspringen Animationen elegant.
import { ViewTransition } from 'react';
<ViewTransition>
<Component />
</ViewTransition>Anforderungen und Einrichtung
Aus dieser Datei wurde kein Abschnitt mit kurzen Anforderungen ausgewählt. Dies bedeutet nicht, dass die Fertigkeit keine Abhängigkeiten hat. Überprüfen Sie die Anweisungen zur Repository-Einrichtung und die referenzierten Dateien.
Grenzwerte und Qualitätskontrollen
Verschachtelte VT-Beschränkung
Wenn ein Elternteil VTmounts/unmountsDa es sich um eine Einheit mit darin verschachtelten VTs handelt, lösen die verschachtelten VTs ihre eigenen Aktionen nicht aus.enter/exit— Nur das äußerste VT wird animiert. (Ein untergeordnetes VT, das in einem *persistenten* übergeordneten VT montiert ist, feuert.)enter/exit(Normalerweise.) Zeitlich versetzte Animationen pro Element während der Seitennavigation sind derzeit nicht verfügbar inNext.jsDen Status des vorgelagerten Experiments entnehmen Sie bitte der Fehlerbehebung.
Aufwärtspassage · L304 ↗Beginnen Sie mit einem sicheren Testlauf
- Prüfen Sie den unterstützten Host und die Installationsanweisungen für das Repository. Halten Sie das Skill-Verzeichnis und die darin enthaltenen Skripte, Assets und Dokumentationen zusammen;SKILL.mdEine Einzelperson kann Abhängigkeiten außer Acht lassen.
- Geben Sie dem Agenten Ihre tatsächlichen Eingaben, die gewünschten Ausgaben und die Akzeptanzkriterien an. Aufrufsyntax und verfügbare Tools hängen vom Hostsystem ab; diese Website geht nicht von einem universellen Installationsbefehl aus.
- Testen Sie den Quellworkflow in einem temporären Projekt oder auf einer Kopie. Überprüfen Sie Vorgänge, die Dateien, Remote-Dienste oder abrechnungsfähige Ressourcen ändern, bevor Sie diese zulassen.
- Überprüfen Sie die Ausgabe anhand der Quellqualitätsprüfungen und Ihrer eigenen Anforderungen. Ein erfolgreicher Trigger oder eine hohe Anzahl von Sternen im Repository garantiert kein korrektes Ergebnis.
Lesen Sie mehr dazu in der Quelle.
- React View Transitions
- Wann animieren?
- Auswahl des Animationsstils
- Verfügbarkeit
- Implementierungs-Workflow
- Die Komponente
- Animationsauslöser
- Regel für die kritische Platzierung
- Requisiten
- CSS-Pseudoelemente
- Übergangstypen
router.back()und die Zurück-Taste des Browsers- Typen und Spannung
- Bereitschaft für gemeinsame Elemente
- Übergänge zwischen gemeinsamen Elementen
- Liste neu anordnen
- Layout-Verschiebungsmorph
- Zusammensetzen gemeinsamer Elemente mit Listenidentität
- Erzwinge erneute Eingabe mit
key - Spannungsfalle auf Inhalt zurückgreifen
- Wie mehrere VTs interagieren
- Verwenden
default="none"Absichtlich - Zwei Muster koexistieren
- Verschachtelte VT-Beschränkung
- Next.jsIntegration
- Zugänglichkeit
- Referenzdateien
- Vollständiges zusammengestelltes Dokument
Verwandte Fähigkeiten
Übersetzung und Umfang
Dieser Leseleitfaden wählt Passagen aus dem markierten stromaufwärts gelegenen Abschnitt aus.SKILL.mdDie Übersetzung wurde unterstützt. Es handelt sich weder um ein vollständiges Handbuch noch um eine Garantie für geprüfte Kompatibilität. Lesen Sie vor der Verwendung das Original und die darin referenzierten Dateien.
Diese Einleitung bezieht sich auf die unten angepinnte Version; die aktuelle Repository-Aktivität und der Erfassungszeitpunkt werden separat angezeigt.
- Angeheftete Quelle
- Lesen Sie das Original ↗
- Quelle abgerufen
- Source-Commit
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62- Quelle SHA-256
693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a