# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Next.js (@nextjs) · 平台：X (Twitter) · 日期：2026-04-02

> 原始來源：https://x.com/nextjs/status/2039740163979698413

## 中文摘要

利用 React View Transitions 實現原生網頁動畫。

React 引入了 `<ViewTransition>` 元件，透過整合瀏覽器的 View Transitions API，讓開發者能以宣告式方式處理頁面導航與狀態變更時的視覺過渡，解決了傳統網頁切換時缺乏連貫性的問題。這項技術不僅是為了美觀，更強調動畫必須具備傳達空間關係或連續性的功能，若無法明確解釋動畫的意義，則不應濫用。

**設計哲學與核心模式**
開發者在導入動畫時，應遵循嚴格的實作優先順序，確保動畫能有效傳達資訊：
- 共享元素變形（Shared element morphing）：傳達「同一物件，深入細節」的連續性。
- Suspense 載入揭示：傳達「資料已載入」的狀態。
- 列表識別（List identity）：傳達「相同項目，重新排列」的變化。
- 狀態變更（Enter/Exit）：傳達「物件出現或消失」的過程。
- 路由變更（Route change）：傳達「前往新頁面」的空間感。

**Next.js 整合與實作機制**
若要在 Next.js 專案中使用此功能，需在 `next.config.ts` 中啟用 `experimental.viewTransition`。該 API 的運作機制有明確的限制與要求：
- 觸發條件：動畫僅由 `startTransition`、`useDeferredValue` 或 `Suspense` 觸發，一般的 `setState` 呼叫不會啟動動畫。
- 導航控制：Next.js 的 `Link` 元件可透過 `transitionTypes` 屬性標記導航方向，例如區分「前進」與「後退」，以實現符合空間邏輯的視覺效果。
- 降級處理：對於不支援 View Transitions 的瀏覽器，應用程式會自動跳過動畫，確保功能不受影響。

**實作規範與技術限制**
為了避免過度動畫化導致的視覺混亂，開發者必須遵守以下規範：
- 謹慎使用 `default="none"`：若未設定此屬性，所有過渡都會觸發預設的交叉淡入效果，導致不必要的視覺干擾。
- 避免濫用方向性滑動：方向性滑動（Directional slides）僅適用於層級導航（如列表到詳情頁），不適用於同層級的標籤切換，否則會錯誤地暗示空間深度。
- 巢狀限制：當父層 `<ViewTransition>` 退出時，內部的子層過渡不會觸發，目前不支援分層交錯動畫。
- 唯一識別：共享元素必須使用唯一的名稱（如 `photo-${id}`），避免在模態視窗與頁面同時渲染時發生衝突。
- 導航限制：`router.back()` 與瀏覽器後退按鈕無法觸發 View Transitions，建議使用帶有明確 URL 的 `router.push()`。
- 無障礙要求：務必在全域樣式表中加入「減少動態效果」（reduced motion）的 CSS 規則，以尊重使用者的系統設定。

**開發建議**
在將此技術整合至現有專案時，建議從審計現有 UI 開始，不要跳過任何步驟。開發者應直接複製官方提供的 CSS 樣式配方，而非自行撰寫動畫 CSS。此外，若無法明確定義某個動畫所傳達的空間關係或連續性，則應避免加入該動畫，以免造成使用者的認知負擔。

## 標籤

React, Web, 功能更新, React