以 skill 自身的术语
一份使用 React 的 View Transition API 在 UI 状态之间实现动画的指南：用 ViewTransition 组件声明「什么」，用 startTransition、useDeferredValue 或 Suspense 触发「何时」，并用 CSS 类控制「如何」。它按固定优先级顺序介绍了五种模式——共享元素变形、列表身份、状态变化和路由变化，以及通过 addTransitionType 实现的按类型区分方向的导航，还包括 Next.js App Router 集成。
它解释了 ViewTransition 边界应放置在何处、何时需要 default="none"、哪些浏览器支持该特性（Chromium 125+、Firefox 144+、Safari 18.2+），在其他浏览器中如何优雅降级，并指向用于实现顺序、CSS 方案、模式和故障排查的参考文件。
它产出什么
- 一个可复用的方向性包装组件，用于在多页面应用中保存按类型区分的进入与退出映射表。
- 通过在卸载和挂载的视图上重用相同的 name 来创建共享元素变形，例如缩略图变成主图。
- 针对 view transition 伪元素编写的 CSS 规则，包括承载两个快照的 image pair。
- 一种优雅降级的实现方式，不支持的浏览器会跳过动画，而不会破坏导航。
工作方式
- 01理清动画所表达的含义
只有当你能清楚说明它所表达的空间关系或连续性时，才添加边界。如果说不清它传达了什么，就不要添加。
- 02用边界包裹状态
React 会在幕后分配唯一的 view-transition-name 并调用 document.startViewTransition，因此你永远不需要自己调用 startViewTransition。
- 03用 Transition 触发它
enter、exit、update 和 share 只会由 startTransition、useDeferredValue 或 Suspense 触发。普通的 setState 不会产生任何动画。
- 04在 CSS 中为快照设置样式
离场和入场快照通过带有你自己类名的 view transition 伪元素来定位，recipes 文件提供了现成的动画。
- 05用 Transition Type 为其打标签
addTransitionType 会堆叠上下文类型，让树中不同的边界做出不同的反应，而按类型划分的对象会将这些类型映射到 enter、exit 和 share 时的 CSS 类。