vercel-react-view-transitions

原文涵盖的主题

• React View Transitions
• When to Animate
• Choosing Animation Style
• Availability
• Implementation Workflow
• Core Concepts
• The Component
• Animation Triggers

Animate between UI states using the browser's native document.startViewTransition. Declare what with , trigger when with startTransition / useDeferredValue / Suspense, control how with CSS classes. Unsupported browsers skip animations gracefully. Every 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. | Context | Animation | Why | |---------|-----------|-----| | Hierarchical navigation (list → detail) | Type-keyed nav-forward / nav-back | Communicates spatial depth | | Lateral navigation (tab-to-tab) | Bare (fade) or def

这里只展示节选，请以完整原文和当前要求为准。