用途：本指南讲解如何用 React 的视图过渡 API，在 UI 状态之间做流畅、接近原生的动画，底层基于浏览器原生 document.startViewTransition。用 <ViewTransition> 声明动画对象，用 startTransition、useDeferredValue 或 Suspense 触发，用 CSS 类控制动画方式；不支持的浏览器会优雅跳过动画。
主要能力：<ViewTransition> 组件会自动分配 view-transition-name 并调用 startViewTransition，无需手动调用。动画触发点包括 enter（在过渡中首次插入）、exit（首次移除）、update（内部 DOM 变化或尺寸位置变化）、share（同名组件在同一个过渡中卸载又挂载）。支持 transition class 属性值 auto、none、自定义类名，以及按类型映射的对象；可用 addTransitionType 打标签，让不同 VT 按上下文选择不同动画。还涵盖共享元素形变、列表重排、布局位移形变、Suspense 揭示、用 key 强制重进入等模式，以及嵌套 VT 的限制（父 VT 整体挂载/卸载时，内部嵌套 VT 不触发自己的 enter/exit）。
使用方式：Next.js 项目不要安装 react@canary，App Router 已内置；非 Next.js 项目需安装 react@canary react-dom@canary。将 references/css-recipes.md 中的 CSS 配方复制进全局样式表，不要自己写动画 CSS；给已有应用添加过渡时按 references/implementation.md 逐步操作，先做审计。TypeScript 中 ViewTransitionClassPerType 的对象必须包含 default 键。
适用场景：层级导航（列表→详情）用带类型的 nav-forward/nav-back 方向滑动；横向或无深度导航用裸 <ViewTransition> 淡入淡出或 default="none"；Suspense 揭示用 enter/exit 字符串属性；后台刷新用 default="none" 静默处理。对共享元素要保证同名 VT 同时只挂载一个，必要时用唯一名称或把命名 VT 移到具体消费者中。
限制：浏览器支持为 Chromium 125+、Firefox 144+、Safari 18.2+，不支持时优雅降级。router.back() 和浏览器前进/后退按钮不带过渡类型，类型化动画会落到默认而不播放。类型只在导航期间可用，后续 Suspense 揭示没有类型。带共享形变的页面不要用淡出式 exit。始终在全局样式表中加入减少动效的 CSS。需注意 default="none" 会同时关闭 update 与 share。更多实现细节参见 references/implementation.md、references/patterns.md、references/css-recipes.md、references/nextjs.md。