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.md英文 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 目錄