返回目录 / 开发工具
React View Transitions：先明确动效表达的空间关系
先判断共享元素、Suspense reveal、列表身份、进出场和路由层级哪些模式适用。
Skills
先核React/Next版本和浏览器支持；按source的implementation reference从审计开始。为层级列表到详情使用type-keyed forward/back，tab横向切换用淡入/无方向，不虚构空间关系。用`<ViewTransition>`表达对象，靠`startTransition`、`useDeferredValue`或Suspense触发；不要自行调用`document.startViewTransition`。确认边界直接位于DOM节点之前以支持enter/exit，并用transition pseudo-element CSS。跑目标浏览器测试，不支持时应可平滑降级。
权限边界
前置条件
- 在React或Next.js中实现页面切换、共享元素、列表重排或组件进出场动画。
权限边界
- 会改React组件边界、Transition触发逻辑、CSS伪元素动画。
限制
React ViewTransition是版本/框架相关；需遵守浏览器支持和源实现步骤，不自造startViewTransition调用。
固定上游来源
- 仓库
- vercel-labs/agent-skills
- 文件路径
- skills/react-view-transitions/SKILL.md
- 固定提交
063bee94c3f4df8453406c830b0a7df0f2860278- 来源检查
- 2026-10-14 · 已按固定上游来源核对
仓库指标
以下数字属于上游仓库整体，不代表单个 Skill 或指南的点赞/热度。
- Stars
- 未取得
- Forks
- 未取得
- 观测时间
- 未取得
尚未取得指标快照。
许可证: MIT
适用工具
React ViewTransition API · CSS view-transition pseudo-elements · browser support matrix · existing route tests