详情
从列表打开详情
命名共享元素可以说明详情页来自用户刚刚点开的卡片。
01 / Skill 档案 · React · 视图过渡
React View Transitions：动画应解释界面关系，而非装饰每次点击
用于 React 界面状态切换的 Skill，覆盖共享元素、页面变化、列表身份与内容出现，也说明什么时候应保持静默。
发布方、原始来源与安装方式
原发布方 Vercel Labs · 类型: React 动画实现 Skill
本页为独立介绍；Vercel Labs 未对 Floatboat 作出背书。
上游安装方式
npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitions安装的是上游指令，不是动画库或 Floatboat 功能。
一个具体请求
原始指南把动画与空间含义对应起来：列表到详情可能需要共享元素，后台刷新却通常不应动。具体实现还受 React 与框架版本约束。
向 Agent 提问
“让画廊卡片到详情页的切换更连续，但不要让标签切换和后台刷新变得显眼。”
应该得到什么
合格方案会找出共享条目、明确过渡边界，并说明哪些状态变化刻意不加动画。
哪些地方值得加入视图过渡
只有在动画有助于理解连续性或内容到达时才加入。
排序
重排仍然存在的条目
保持条目身份稳定，让动画表达位置变化，而不是条目消失再出现。
加载
Suspense 后显示内容
克制的进入动画可以提示新内容到达，而不必让每次数据刷新都产生动效。
哪些动画反而会误导
- 不应打断用户注意力的后台重新验证。
- 无层级关系的标签页之间使用定向滑动；这会暗示不存在的层级。
如何选择过渡模式
先检查两个状态的关系，再处理 CSS 或过渡 API。
- 01
画出界面关系
区分层级导航、横向切换、条目重排和数据到达。
- 02
选择对应触发方式
根据关系和版本，选择原文对应的 React 过渡模式。
- 03
测试动效与降级
检查浏览器支持、减少动态效果设置及无动画时的行为。
02 / 使用指南
选择能解释导航关系的动画
共享身份、方向和内容出现分别表达不同关系；实现前还要核对框架与浏览器支持。
何时适合使用共享元素过渡？
当同一个事物跨视图延续时，例如卡片打开详情页，共享元素能说明两者关系。原文强调身份和方向要有意义，而不是为了有动画而动画。
使用 React ViewTransition 前要检查什么？
核对 React、Next.js 配置、浏览器表现、触发方式与减少动态效果支持。原文也区分了 Next.js 自带的 React 行为和其他 React 项目。
你能拿到什么
- 界面状态的过渡关系图
- 有限范围的 React/CSS 实现
- 降级与减少动态效果检查项
使用前先核对
- 动画是否表达真实关系？
- 项目 React 版本是否支持该做法？
- 跳过动画后界面是否仍可用？
探索更多 Agent Skills
查看其他 Skill 指南，并在使用前核对原始来源。
常见问题
每次路由变化都需要动画吗？
不用。原文强调过渡要说明空间连续性；无关切换或后台变化可能保持静态更清楚。
必须安装第三方动画库吗？
这个 Skill 聚焦 React 的 ViewTransition API 与 CSS；能否使用仍取决于 React 和框架配置。
如何处理减少动态效果偏好？
需要提供无动画也可用的路径，并测试用户的减少动态效果设置；关键内容不能只靠动画传达。
所有 React 应用都能用同一套写法吗？
不能。原文区分 Next.js 与非 Next.js 的可用条件，应按版本阅读对应实现参考。