floatboat
打开导航菜单

Vercel React View Transitions by Vercel Labs

使用 Vercel Labs 的 React View Transitions，为 React 界面状态变化设计合适的过渡。围绕卡片进入详情、列表重排和内容加载选择实现方式，让动效表达界面关系，并结合框架配置、浏览器支持与减少动态效果偏好验证体验。

为一次导航设计清楚的视觉过渡

先说明两个界面状态之间的关系，以及哪些元素应保持可辨认。请求可以比较共享元素、稳定条目身份和内容出现方式，同时将导航及减少动态效果行为纳入审阅要求。

说明起点、终点、共享元素和减少动态效果的要求。

复制请求，在 Floatboat 新对话中粘贴，并提供所需资料。

下载 Floatboat

带入 Floatboat 的请求

请求可预览和复制，不会从此处自动发送。

参考来源: Vercel React View Transitions
https://github.com/vercel-labs/agent-skills/blob/main/skills/react-view-transitions/SKILL.md

先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时，先提出方案。

我的任务:
让画廊卡片到详情页的切换更连续，但不要让标签切换和后台刷新变得显眼。

期望交付:
区分导航与后台更新的过渡方案，并包含减少动态效果的处理。

关于 Vercel React View Transitions

React View Transitions 是 Vercel Labs 发布的界面过渡 Skill，指导 Agent 使用 React 的 ViewTransition 相关 API 与 CSS 实现状态之间的动效。它围绕共享元素、内容到达、列表条目身份和导航关系组织方案，帮助确定哪些元素应保持视觉连续、何时触发过渡，以及如何表达变化。具体 API 是否可用取决于 React 与框架配置，需要在实现前核对版本。使用时应明确一段具体的界面变化与它要表达的关系，并验证导航、减少动态效果设置，以及无法运行动画时的正常使用路径。

Vercel React View Transitions Skill的使用场景

共享元素可以说明详情来自哪张卡片，稳定身份可以让排序表现为移动。React 过渡需要围绕这种关系设计，并检查 Suspense 刷新、返回导航及减少动态效果时的体验。

从列表打开详情

从列表打开详情时，可以通过具名共享元素保留它与所选卡片的关系。确定两条路由共用的图片或标题，围绕来源设计过渡，并同时检查进入与返回导航，让使用者在两个方向都能理解页面之间的联系。

重排仍然存在的条目

筛选或排序现有列表时，动画应表达位置重排，而不是消失后重新创建。核对条目 ID 及调整前后的状态，通过稳定身份组织过渡。即使位置发生变化，使用者仍应能够辨认它们是原来的记录。

Suspense 后显示内容

Suspense 后到达的内容可以使用克制的出现动效，但不需要每次刷新都重复播放。检查边界、占位内容和刷新触发条件，区分首次揭示与后台更新，并考虑减少动态效果的偏好，使过渡规则适合不同使用者。

保证减少动画时仍然可用

使用者偏好减少动态效果，或过渡不可用时，导航及内容关系仍应清楚。比较有动画和无动画路径，包括焦点与返回导航，不让运动成为动作成功的唯一信号。先记录必要行为，再把视觉过渡作为辅助界面的一部分。

如何实现 React 视图过渡

过渡应解释状态之间的关系，不能先选动效再寻找用途。确认 React 和框架支持后，还需检查返回导航、减少动态效果设置及无动画行为，使视觉变化不会妨碍页面使用。

  1. 说明状态关系

    提供起始与结束视图。明确变化属于共享元素、列表重排、内容出现还是导航。

  2. 实现匹配模式

    与 Agent 核对 React 和框架前提。应用匹配的触发方式、元素身份与 CSS。

  3. 测试动效与降级

    在支持的浏览器及开启减少动态效果时检查流程。确认关闭动画后，相同操作仍能正常完成。

探索更多 Agent Skills

查看其他 Skill 指南，并在使用前核对原始来源。

Vercel React View Transitions 常见问题

每次路由变化都需要动画吗？
不用。原文强调过渡要说明空间连续性；无关切换或后台变化可能保持静态更清楚。
必须安装第三方动画库吗？
这个 Skill 聚焦 React 的 ViewTransition API 与 CSS；能否使用仍取决于 React 和框架配置。
如何处理减少动态效果偏好？
需要提供无动画也可用的路径，并测试用户的减少动态效果设置；关键内容不能只靠动画传达。
所有 React 应用都能用同一套写法吗？
不能。原文区分 Next.js 与非 Next.js 的可用条件，应按版本阅读对应实现参考。
视图过渡无法运行时应该怎样降级？
导航和状态变化仍应正常完成。把动画当作增强效果，关闭动画后也不能隐藏内容、拖延操作或阻止用户进入下一个视图。
如何判断共享元素过渡是否有意义？
应有明确的视觉关系，例如选中的卡片进入对应详情。如果前后元素并不相关，简单过渡或不加动画通常更容易理解。
实现 ViewTransition 前应检查什么？
结合来源中的实现参考核对 React 版本、框架配置和浏览器支持，并提供现有路由或组件，说明需要连接的前后两个状态。