技能说明
适合 React/Next.js 网页需要列表到详情、路由切换或状态变化动画的场景；只在动画能表达空间关系或连续性时使用，并补充 reduced-motion 样式和不支持浏览器的降级方案。
关于此技能
Vercel 官方的 React 页面转场技能，指导使用浏览器原生 View Transition API 做有意义、可维护的界面动效。
核心能力
页面与共享元素转场
用 ViewTransition 处理列表到详情、前进后退、图片共享元素和页面级切换，保持内容连续性。
列表与加载状态动画
覆盖列表重排、进入退出、Suspense 加载展示和背景更新，区分需要动画与应保持安静的状态。
类型化动画与降级
用 transition type 区分导航方向，并结合 reduced-motion；不支持的浏览器会跳过动画而保留基本功能。
适用场景
列表到详情
让卡片、图片或标题从列表自然过渡到详情页，强化用户对内容层级的理解。
React/Next.js 路由切换
为页面前进、后退或横向切换设计合适的淡入、滑动或共享元素效果。
动态列表和加载反馈
为新增、删除、重排或异步内容加载提供克制的视觉反馈，减少界面跳变。
使用步骤
- 01
第一步：判断是否需要动画
先确认动画表达了空间关系、连续性或状态变化；没有明确意义时保持静态。
- 02
第二步：选择转场模式
按层级导航、横向标签、列表身份或 Suspense 加载选择共享元素、类型化转场或进入退出动画。
- 03
第三步：实现并检查
按官方参考逐步接入组件和 CSS，补充 reduced-motion；在目标浏览器和移动端检查动画、键盘操作和降级效果。
常见问题
需要安装第三方动画库吗？+
不一定。React/Next.js 可使用 View Transition 能力；非 Next.js 项目需要对应的 React canary 版本，具体以技能说明和项目版本为准。
所有浏览器都支持吗？+
不是。Chromium 125+、Firefox 144+、Safari 18.2+ 支持程度较好，不支持时应正常显示内容而不依赖动画。
什么时候不应加入转场？+
如果动画不能表达层级、连续性或状态变化，或会影响性能、可访问性和理解速度，就不应为了装饰而加入。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/08/29
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
npx skills add vercel-labs/agent-skills