Fähigkeiten vercel-react-view-transitions

📦

vercel-react-view-transitions

Name: vercel-react-view-transitions
Author: vercel-labs

Sicher

Native View Transitions zu React-Apps hinzufügen

Das Hinzufügen von sanften Seitenübergängen und Shared-Element-Animationen zu React-Apps erfordert ein Verständnis der View Transitions API und ihrer Integrationsmuster. Diese Skill bietet Schritt-für-Schritt-Anleitung, CSS-Rezepte und Next.js-Muster von Vercel Labs.

Unterstützt: Claude Codex Code(CC)

🥈 79 Silber

Die Skill-ZIP herunterladen

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

Einschalten und loslegen

Teste es

Verwendung von "vercel-react-view-transitions". Füge Übergänge zu meiner Produktliste hinzu

Erwartetes Ergebnis:

Umgib deine Produktelemente mit <ViewTransition> mit eindeutigen Keys, füge CSS für ::view-transition-old/new Pseudo-Elemente hinzu und verwende startTransition, um Animationen bei Zustandsänderungen auszulösen.

Verwendung von "vercel-react-view-transitions". Warum animiert der Browser-Zurück-Button nicht?

Erwartetes Ergebnis:

Die Browser-Zurück/Vorwärts-Buttons verwenden synchrone popstate-Events, die mit startViewTransition nicht kompatibel sind. Verwende stattdessen router.push() mit expliziten URLs, um Animationsunterstützung zu gewährleisten.

Verwendung von "vercel-react-view-transitions". Wie animiere ich Listen-Neuordnung?

Erwartetes Ergebnis:

Weise eindeutige view-transition-name-Werte jedem Element unter Verwendung seiner ID zu. Wenn Elemente ihre Reihenfolge ändern, erfasst der Browser automatisch die Positionsänderung und animiert sie sanft.

Sicherheitsaudit

Sicher

v1 • 4/19/2026

All 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).

Gescannte Dateien

2,199

Analysierte Zeilen

befunde

Gesamtzahl Audits

Keine Sicherheitsprobleme gefunden

Auditiert von: claude

Qualitätsbewertung

Architektur

100

Wartbarkeit

Inhalt

Community

100

Sicherheit

Spezifikationskonformität

Was du bauen kannst

Seitenübergänge zu Next.js App hinzufügen

Implementieren Sie sanfte Slide-Übergänge, wenn Benutzer zwischen Routen in einer Next.js-Anwendung navigieren, unter Verwendung des App Routers und des experimentellen viewTransition-Flags.

Shared-Element-Animationen erstellen

Lassen Sie Produktbilder sanft von einer Grid-Karte zu einer Detailseitenansicht morphen und schaffen Sie ein Premium-Gefühl wie bei nativen mobilen Apps.

Datenladezustände animieren

Ersetzen Sie abrupte Inhaltswechsel durch sanfte Suspense-Enthüllungen, die Inhalte nach Datenabrufen elegant animiert erscheinen lassen.

Probiere diese Prompts

Seitenübergänge hinzufügen

Füge View-Übergänge zu meiner Next.js App hinzu, sodass Seiten beim Navigieren einschieben

Shared Element implementieren

Ich habe ein Produktgrid. Wenn ich ein Produkt anklicke, sollte das Bild vom Grid zur Hero-Sektion der Detailseite animiert werden

Animationskonflikte beheben

Meine View-Übergänge brechen, wenn Suspense aufgelöst wird. Wie verhindere ich, dass verschachtelte Animationen die Seitenübergänge stören?

Directionale Navigation

Implementiere Vorwärts- und Zurück-Navigationsanimationen, die in entgegengesetzte Richtungen einschieben, sodass Benutzer räumliche Tiefe in meiner App spüren

Bewährte Verfahren

Beginne mit dem Audit-Schritt - identifiziere alle Stellen, die Übergänge benötigen, bevor du Code schreibst
Kopiere CSS-Rezepte aus der Skill anstatt eigene Animationen von Grund auf zu schreiben
Teste immer mit reduced-motion-Einstellungen und graceful Degradation für ältere Browser

Vermeiden

Rufe document.startViewTransition() nicht direkt auf - lass die ViewTransition-Komponente dies erledigen
Vermeide directionale Slides für seitliche Navigation (Tabs) - dies impliziert fälschlicherweise räumliche Tiefe
Umbinde ViewTransition nicht in einem div - die Komponente muss der äußere Wrapper sein, um Enter/Exit zu ermöglichen

Häufig gestellte Fragen

Welche React-Version brauche ich?

React Canary wird benötigt. Next.js App Router enthält ihn automatisch. Für andere Frameworks installiere react@canary und react-dom@canary.

Funktioniert das mit dem App Router?

Ja. Aktiviere experimental.viewTransition in next.config.js, verwende die transitionTypes-Prop auf next/link und folge den Mustern in references/nextjs.md.

Warum funktionieren meine Animationen nicht?

Prüfe, dass ViewTransition das Component als äußeres Element umschließt, verwende startTransition/useDeferredValue/Suspense als Trigger und setze default="none", es sei denn, du möchtest Cross-Fade bei jeder Änderung.

Wie handhabe ich Browser-Unterstützung?

Nicht unterstützte Browser überspringen Animationen elegant. Füge immer CSS mit reduced-motion Media Query aus der css-recipes Referenzdatei hinzu.

Kann ich den Browser-Zurück-Button animieren?

Nein. Die Browser-Zurück/Vorwärts-Buttons verwenden synchrones popstate, was mit startViewTransition nicht kompatibel ist. Verwende stattdessen router.push() mit expliziten URLs.

Wie verhindere ich Animationen während Hintergrund-Updates?

Setze default="none" auf ViewTransition-Komponenten. Dies deaktiviert Animationen, es sei denn, sie werden explizit mit enter/exit/share-Props aktiviert.