要点
Native browser animations for React UI state changes using the View Transition API.
- Declare animations with
<ViewTransition>component; trigger withstartTransition,useDeferredValue, orSuspense; control styling via CSS classes and pseudo-elements - Supports five animation patterns in priority order: shared elements (morphing), Suspense reveals, list identity (reorder), state changes (enter/exit), and route changes
- Use
addTransitionTypeto apply context-aware animations (e.g., directional slides for hierarchical navigation, fades for lateral tabs) - Works in Next.js App Router out of the box; requires
react@canaryfor standalone React; gracefully degrades on unsupported browsers (Chromium 111+, Firefox 144+, Safari 18.2+) - Includes step-by-step implementation workflow, CSS animation recipes, and patterns for shared elements, list reorder, Suspense reveals, and directional navigation
SKILL.md
React View Transitions
Animate between UI states using the browser's native document.startViewTransition. Declare what with <ViewTransition>, trigger when with startTransition / useDeferredValue / Suspense, control how with CSS classes. Unsupported browsers skip animations gracefully.
When to Animate
Every <ViewTransition> should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.
Implement all applicable patterns from this list, in this order:
| Priority | Pattern | What it communicates |
|---|---|---|
| 1 | Shared element (name) |
"Same thing — going deeper" |
| 2 | Suspense reveal | "Data loaded" |
| 3 | List identity (per-item key) |
"Same items, new arrangement" |
| 4 | State change (enter/exit) |
"Something appeared/disappeared" |
| 5 | Route change (page-level) | "Going to a new place" |
This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.
React View Transitions
Animate between UI states using the browser's native document.startViewTransition. Declare what with <ViewTransition>, trigger when with startTransition / useDeferredValue / Suspense, control how with CSS classes. Unsupported browsers skip animations gracefully.
When to Animate
Every <ViewTransition> should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.
Implement all applicable patterns from this list, in this order:
| Priority | Pattern | What it communicates |
|---|---|---|
| 1 | Shared element (name) |
"Same thing — going deeper" |
| 2 | Suspense reveal | "Data loaded" |
| 3 | List identity (per-item key) |
"Same items, new arrangement" |
| 4 | State change (enter/exit) |
"Something appeared/disappeared" |
| 5 | Route change (page-level) | "Going to a new place" |
This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.