用途概括使用 React 视图过渡 API 实现流畅原生动画的指南。提供组件用法、CSS 配方、过渡类型与有序实现模式。产出为带优雅降级的动画 UI，无需第三方动画库。
业务领域
CodingDesign
技能形态
Style GuideWorkflow
业务领域
技能形态
技能解析
剖析技能的工作原理和产出物，快速判断你的场景与价值。
当用户想要添加页面过渡、动画化路由切换、创建共享元素动画、组件进入/退出、列表重排、方向性导航，或在 Next.js 中集成视图过渡且不使用第三方库时。
<ViewTransition> 声明动画对象；通过 startTransition、useDeferredValue 或 Suspense 触发。addTransitionType 控制不同上下文的动画样式。references/implementation.md；从 references/css-recipes.md 复制 CSS。在 React/Next.js 中实现流畅的原生感 UI 动画，优雅降级，提升感知性能与空间连续性，无需外部动画依赖。
使用场景
开发者构建 Next.js 电商站点，希望列表到详情导航有共享图片变形。使用该技能，按审计与实现步骤，添加列表标识与共享元素的嵌套 `<ViewTransition>`，复制 CSS 配方，获得流畅的层级导航动画，传达空间深度，提升体验且无需额外库。
团队维护 React 仪表盘，需要筛选时面板进入/退出与列表重排动画。使用技能将项用带 key 的 `<ViewTransition>` 包裹，在 `startTransition` 内触发，对层级筛选应用类型化方向滑动。结果是更清晰的状态变更与重排原生过渡，提升感知性能。
技能关系
依赖关系读作「上一格指向下一格」。当前 Skill 位于第二格，上下分别是影响它与被它影响的 Skill。
第一层 · 这些 Skills 用了我
第二层 · 当前 Skill
第三层 · 我用了这些 Skills
在所属技能集的全局上下文中浏览当前 Skill 的关系。点击节点切换右侧详情,搜索框可快速定位技能。
技能文件