C✳CODEZ.WIN
🌐 简体中文

Skill 多语言阅读指南

vercel-react-view-transitions用途、用法与原始来源

使用 React 的 View Transition API 实现流畅、原生风格的动画指南 component, 添加过渡类型, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, 开始视图转换, ViewTransition、过渡类型，或者询问如何在不使用第三方动画库的情况下在 React 中实现 UI 状态之间的动画。

原文采集时间:

来源仓库
vercel-labs/agent-skills
SKILL.md
skills/react-view-transitions/SKILL.md
仓库 Star
33,269
仓库最近更新
2026/10/29
能力分类
开发
最近采集时间

许可：未标明

原始 SKILL.mdEnglish README

流程片段用于帮助阅读上游说明。本页没有执行第三方 Skill，不属于实测评测。

下面的用途和操作片段来自上游文档，由本站整理并翻译，和另行标注的 Codez 编辑分析分开展示。

这个 Skill 能做什么

使用 React 的 View Transition API 实现流畅、原生风格的动画指南 component, 添加过渡类型, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, 开始视图转换, ViewTransition、过渡类型，或者询问如何在不使用第三方动画库的情况下在 React 中实现 UI 状态之间的动画。

如何使用：上游操作流程

实施工作流程

向现有应用添加视图过渡效果时，请遵循以下规则references/implementation.md循序渐进。首先进行审计——不要跳过这一步。使用references/css-recipes.md找到适用的 CSS 并将其适配到应用程序中。

原文片段 · L51 ↗

何时制作动画

每个“”都应该传达空间关系或连续性。如果无法清晰表达其含义，请勿添加。请按以下顺序实现列表中所有适用的模式：这是一个实现顺序，而非“任选其一”的列表。实现所有符合应用需求的模式。仅当应用完全不需要某个模式时才可跳过。

原文片段 · L14 ↗

React 视图过渡

使用浏览器原生功能在 UI 状态之间实现动画效果document.startViewTransition. 使用 声明 *什么*, trigger *when* with 开始过渡 / 使用延迟值 / 悬念效果，可通过 CSS 类控制其*呈现方式*。不支持的浏览器会优雅地跳过动画。

原文片段 · L10 ↗
原文片段 · jsx ↗
import { ViewTransition } from 'react';

<ViewTransition>
  <Component />
</ViewTransition>

环境与依赖

本次未从该文件选出独立的环境要求片段，不代表无需依赖。请继续核对仓库的安装说明和引用文件。

限制与结果检查

嵌套 VT 限制

当父母 VTmounts/unmounts作为一个包含嵌套VT的单元，嵌套的VT本身不会触发自身的爆炸。enter/exit只有最外层的虚拟终端会触发动画。（安装在*持久*父虚拟终端内部的子虚拟终端会触发动画）enter/exit通常情况下。）目前页面导航期间不支持逐项交错动画。Next.js; 请参阅故障排除以了解上游实验状态。

原文片段 · L304 ↗

开始使用前

  1. 先核对支持的 Agent 宿主和仓库安装说明。保留完整 Skill 目录及其引用的脚本、资源和文档，只复制 SKILL.md 可能漏掉依赖。
  2. 向 Agent 提供实际输入、期望输出和验收标准。调用方式与可用工具取决于宿主环境，本站不假定存在通用的安装命令。
  3. 先在临时项目或输入副本上试用。涉及修改文件、远程服务或计费资源的操作，应逐项核对后再授权。
  4. 按照原文检查项和自己的需求验证输出。成功触发或仓库 Star 较高，都不能证明结果正确。

Skill 文件与目录格式规范 ↗

继续阅读原始文档

翻译与介绍范围

本页从固定版本的上游 SKILL.md 整理用途与操作片段，译文使用辅助翻译。它不是完整手册，也不代表经过兼容性实测；使用前请核对原文及其引用文件。

介绍依据下方列出的固定版本；当前仓库动态和目录采集时间单独展示。

固定版本来源
阅读原文 ↗
原文采集时间
来源提交版本
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62
原文 SHA-256
693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a
返回完整 Skill 目录