vercel-react-view-transitions
為 React 應用程式新增原生檢視轉場效果
為 React 應用程式新增流暢的頁面轉場和共享元素動畫，需要理解 View Transitions API 及其整合模式。此技能提供逐步指導、CSS 配方，以及來自 Vercel Labs 的 Next.js 模式。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「vercel-react-view-transitions」。 為我的產品清單新增轉場
預期結果:
使用唯一金鑰將產品項目包裝在 <ViewTransition> 中，為 ::view-transition-old/new 擬似元素新增 CSS，並在狀態變更時使用 startTransition 觸發動畫。
正在使用「vercel-react-view-transitions」。 為什麼瀏覽器後退按鈕沒有動畫？
預期結果:
瀏覽器後退/前進按鈕使用同步的 popstate 事件，這與 startViewTransition 不相容。請改用帶有明確 URL 的 router.push() 以維持動畫支援。
正在使用「vercel-react-view-transitions」。 如何讓清單重新排序有動畫？
預期結果:
使用項目的 ID 為每個項目指派唯一的 view-transition-name 值。當項目重新排序時，瀏覽器會自動捕捉位置變更並平滑地製作動畫。
安全審計
安全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 配方，而不是從頭開始撰寫自訂動畫
- 務必以 reduced-motion 偏好設定和舊版瀏覽器的優雅降級進行測試
避免
- 不要直接呼叫 document.startViewTransition() - 讓 ViewTransition 元件處理它
- 避免為側向導航（分頁）使用方向性滑動 - 這會錯誤地暗示空間深度
- 不要將 ViewTransition 包裝在 div 內 - 元件必須是外部包裝器才能啟用進入/退出