In den eigenen Worten des Skills
Ein Leitfaden zum Animieren zwischen UI-Zuständen mit Reacts View Transition API: deklarieren Sie das Was mit der ViewTransition-Komponente, lösen Sie das Wann mit startTransition, useDeferredValue oder Suspense aus und steuern Sie das Wie über CSS-Klassen. Er behandelt fünf Muster in einer festen Prioritätsreihenfolge, Shared-Element-Morphs, Listenidentität, Zustandsänderung und Routenänderung, plus typgebundene gerichtete Navigation über addTransitionType und die Integration mit dem Next.js App Router.
Er erklärt, wo eine ViewTransition-Grenze sitzen muss, wann default="none" erforderlich ist, welche Browser sie unterstützen (Chromium 125+, Firefox 144+, Safari 18.2+) mit sanfter Degradierung anderswo, und verweist auf Referenzdateien für Implementierungsreihenfolge, CSS-Rezepte, Muster und Fehlerbehebung.
Was er erzeugt
- Eine wiederverwendbare gerichtete Wrapper-Komponente, die die typgebundenen Enter- und Exit-Maps für Multi-Page-Apps enthält.
- Shared-Element-Morphs, die durch Wiederverwendung desselben Namens auf den aus- und einblendenden Views entstehen, zum Beispiel ein Thumbnail, das zu einem Hero-Bild wird.
- CSS-Regeln, die an die View-Transition-Pseudo-Elemente gebunden sind, einschließlich des Bildpaars, das beide Snapshots enthält.
- Eine Implementierung, die sich elegant zurückstuft, bei der nicht unterstützte Browser die Animation überspringen, statt die Navigation zu beschädigen.
So funktioniert es
- 01Herausfinden, was die Animation aussagt
Fügen Sie eine Boundary nur hinzu, wenn Sie die räumliche Beziehung oder Kontinuität, die sie ausdrückt, benennen können. Wenn Sie nicht sagen können, was sie vermittelt, fügen Sie sie nicht hinzu.
- 02Den State in eine Boundary einwickeln
React weist im Hintergrund einen eindeutigen view-transition-name zu und ruft document.startViewTransition auf, sodass Sie startViewTransition nie selbst aufrufen.
- 03Mit einer Transition auslösen
Enter, exit, update und share werden nur von startTransition, useDeferredValue oder Suspense ausgelöst. Ein einfaches setState animiert nichts.
- 04Die Snapshots in CSS stylen
Die ausgehenden und eingehenden Snapshots werden über View-Transition-Pseudo-Elemente mit Ihren eigenen Klassennamen angesprochen, wobei die Recipes-Datei fertige Animationen liefert.
- 05Mit Transition-Typen kennzeichnen
addTransitionType stapelt Kontext-Typen, sodass unterschiedliche Boundaries im Baum unterschiedlich reagieren, und ein Per-Type-Objekt mappt diese Typen auf CSS-Klassen bei enter, exit und share.