vercel-react-view-transitions
为 React 应用添加原生视图过渡效果
为 React 应用添加流畅的页面过渡效果和共享元素动画需要理解视图过渡 API 及其集成模式。本技能提供来自 Vercel Labs 的逐步指导、CSS 配方和 Next.js 模式。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“vercel-react-view-transitions”。 Add transitions to my product list
预期结果:
Wrap your product items in <ViewTransition> with unique keys, add CSS for ::view-transition-old/new pseudo-elements, and use startTransition to trigger animations when state changes.
正在使用“vercel-react-view-transitions”。 Why is browser back button not animating?
预期结果:
The browser back/forward buttons use synchronous popstate events, which are incompatible with startViewTransition. Use router.push() with explicit URLs instead to maintain animation support.
正在使用“vercel-react-view-transitions”。 How do I animate list reordering?
预期结果:
Assign unique view-transition-name values to each item using their ID. When items reorder, the browser automatically captures the position change and animates it smoothly.
安全审计
安全All static findings are false positives. The skill is legitimate documentation from Vercel Labs for implementing React View Transitions. No malicious code patterns exist. All 781 flagged instances are benign keyword matches in markdown documentation (backticks for code formatting, words like 'keystroke' in UI context, TypeScript type names, and standard documentation URLs).
质量评分
你能构建什么
为 Next.js 应用添加页面过渡效果
使用 App Router 和实验性 viewTransition 标志，在 Next.js 应用中实现用户在不同路由之间导航时的流畅滑动过渡效果。
创建共享元素动画
让产品图片从网格卡片平滑变形到详情页面视图，营造原生移动应用般的优质体验。
为数据加载状态添加动画
用流畅的 Suspense 显式替换突兀的内容闪烁，在数据获取后优雅地动画显示内容。
试试这些提示
为我的 Next.js 应用添加视图过渡效果，使页面导航时滑入
我有一个产品网格。点击产品时，图片应该从网格动画过渡到详情页的主图区域
我的视图过渡效果在 Suspense 解析时会失效。如何防止嵌套动画干扰页面过渡效果？
实现前进和后退导航动画，它们向相反方向滑动，让用户在应用中感受到空间深度
最佳实践
- 从审计步骤开始——在编写代码之前识别所有需要过渡效果的位置
- 从技能中复制 CSS 配方而不是从头编写自定义动画
- 始终使用减少动画偏好进行测试，并为旧版浏览器提供优雅降级
避免
- 不要直接调用 document.startViewTransition()——让 ViewTransition 组件处理它
- 避免为横向导航（标签页）使用方向性滑动——这会错误地暗示空间深度
- 不要将 ViewTransition 包装在 div 内——组件必须作为外层包装器才能启用进入/退出效果