教學·網頁7 分鐘閱讀·Updated 2026 年 10 月·ExodeUI 團隊
View Transitions API：瀏覽器中的平滑頁面和狀態更改
視圖轉換 API 的用途、同一文件和跨文件轉換如何運作、如何使用 CSS 設計它們的樣式以及如何負責任地使用它們。
直接總結與定義
核心要點
View Transitions API 允許瀏覽器在頁面的兩種狀態之間進行動畫處理。使用更新 DOM 的函數呼叫 document.startViewTransition()，瀏覽器會快照新舊視圖並在它們之間進行動畫處理，您可以使用 ::view-transition 偽元素對其進行樣式設定。它適用於單頁應用程序，並支援瀏覽器跨頁面導航。
它是如何運作的
MDN 將 document.startViewTransition() 描述為啟動相同文件視圖轉換，這在單頁應用程式中很常見。瀏覽器捕獲當前視圖，運行更新，捕獲新視圖，並在它們之間進行動畫處理。預設情況下，這是交叉淡入淡出；CSS 讓您更改它。
同一文檔和跨文檔
同一文件轉換在一個頁面內運行，就像在 SPA 中一樣，Chrome 自 Chrome 111 起就支援它們。跨文檔轉換在多頁面站點中的不同頁面之間進行動畫處理，MDN 指出這在歷史上是不可能的；他們使用 pageswap 和 pagereveal 事件以及 CSS 中的選擇加入。兩者之間的瀏覽器支援有所不同，因此請檢查目前的相容性表。
設定過渡樣式
大多數定制都是簡單的 CSS：
- 為元素指定一個視圖轉換名稱，以將其與頁面的其餘部分分開進行動畫處理，例如縮圖變成英雄圖像。
- 定位 ::view-transition-old() 和 ::view-transition-new() 來自訂動畫。
- 保持持續時間較短且動作有意義。
- 將自訂動畫包裝在首選減少運動檢查中。
漸進增強
在呼叫 API 之前始終檢查支援情況，如果缺少，請直接更新 DOM。頁面應該在沒有動畫的情況下同樣工作。避免導航上的長過渡，這會讓整個網站感覺更慢。
生產實施片段
互動組件實現
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}要記住的關鍵 Principle
- startViewTransition() snapshots old and new views and animates between them
- 存在相同文件 (SPA) 和跨文件（多頁）變體
- 帶有 view-transition-name 和 ::view-transition 偽元素的樣式
- 檢查支援並回退到即時更新
- 保持過渡簡短並尊重減少的動作
常見問題解答
來源
- View Transition API — MDN 網路文檔
- Smooth transitions with the View Transition API — 面向開發者的Chrome