用途：本指南面向 React 应用，说明如何利用浏览器原生 document.startViewTransition 在 UI 状态切换间做动画。核心是用 <ViewTransition> 声明动画对象（不要自行调用 startViewTransition），用 startTransition / useDeferredValue / Suspense 触发，用 CSS 类控制动画方式；不支持的浏览器会优雅降级、跳过动画。
主要能力与模式：提供按优先级排列的实现模式——共享元素（name）、Suspense 显隐、列表身份（逐项 key）、状态进入/退出、路由切换；并给出按动画风格选型的建议（层级导航用带类型的 nav-forward/nav-back 定向滑动；横向导航用淡入淡出或 default="none"；Suspense 显隐用 enter/exit 字符串属性；后台刷新用 default="none"）。支持用 addTransitionType 为过渡打标签，并以对象形式将类型映射到 CSS 类；支持 enter/exit/share 非对称设置。
用法要点：<ViewTransition> 只有出现在任何 DOM 节点之前才会激活 enter/exit；default="none" 会关闭未显式列出的触发器，也会关掉 update 与 share，需谨慎使用；命名共享元素同一时刻只能挂载一个，需用唯一名称；只有 startTransition、useDeferredValue 或 Suspense 能激活视图过渡，普通 setState 不会触发动画。
环境与限制：Next.js App Router 已内置 canary 版 React，无需安装 react@canary，开箱即可用；非 Next.js 项目需安装 react@canary react-dom@canary。浏览器支持 Chromium 125+（React 需要 startViewTransition 的 v2 对象形式）、Firefox 144+、Safari 18.2+。router.back() 与浏览器前进/后退不带过渡类型，定向动画会落到默认而不播放。嵌套 VT 中父级整体挂载/卸载时，子级不会触发自身 enter/exit。应始终在全局样式中加入减少动态效果（reduced motion）的 CSS。更多细节见 implementation.md、patterns.md、troubleshooting.md、css-recipes.md、nextjs.md 等参考文件。