介紹
提供動態頁面轉換是提升現代 Web 應用程式整體使用者體驗 (UX) 的關鍵因素。
從歷史上看，為了在頁面導航之間平滑地變形或淡出元素，開發人員必須導入大量 JavaScript 庫，例如 Framer Motion 或 GAP。這些庫需要深度掛鉤渲染生命週期，以在對舊 DOM 節點進行動畫處理時延遲卸載。
W3C 標準 View Transitions API 的引入簡化了這個過程。它允許瀏覽器以最少的 CSS 和 JavaScript 原生捕獲狀態並插入頁面佈局更新。
1. 什麼是視圖轉換 API？
View Transitions API 的工作原理是捕獲 DOM 修改之前和之後頁面的快照狀態，並在兩個狀態之間自動運行硬體加速的交叉淡入淡出或變形動畫。
核心優勢
- 減少樣板： 無需在 JS 中處理計時器、關鍵幀或狀態掛鉤來推遲頁面渲染。
- 卓越的效能： 由於過渡在 GPU 執行緒上本機運行，因此可以最大程度地減少視覺幀丟失。
- SPA 和 MPA 相容性： 瀏覽器支援最初是為單頁應用程式建置的，現已擴展到涵蓋多頁應用程式 (MPA)。
2. 基本設定（SPA 範例）
讓我們看看如何在標準應用程式中的 DOM 更新期間應用轉換。
傳統 DOM 更新
// The content updates instantly with no transition
function updateContent() {
document.querySelector('.content').innerHTML = '<h1>New Heading</h1>';
}
實現視圖轉換
只需將 DOM 更新函數包裝在瀏覽器的 document.startViewTransition() 回呼中即可。
function updateContent() {
// Check browser capability
if (!document.startViewTransition) {
document.querySelector('.content').innerHTML = '<h1>New Heading</h1>';
return;
}
// Animate the update
document.startViewTransition(() => {
document.querySelector('.content').innerHTML = '<h1>New Heading</h1>';
});
}
僅使用此包裝器，瀏覽器即可擷取傳出和傳入狀態，預設執行 0.25 秒的交叉淡入淡出。
3. 透過 CSS 自訂轉換
若要自訂預設的交叉淡入淡出動畫，您可以定位佈局引擎在過渡狀態期間公開的特定偽元素。
當呼叫 startViewTransition 時，瀏覽器會建構一個暫時的偽元素樹：
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root) (Outgoing page snapshot)
└─ ::view-transition-new(root) (Incoming page snapshot)
若要建立滑出和滑入過渡而不是交叉淡入淡出，請將以下內容新增至樣式表：
/* Disable default crossfades and bind custom keyframes */
::view-transition-old(root) {
animation: 0.3s ease-out both slide-out;
}
::view-transition-new(root) {
animation: 0.3s ease-out both slide-in;
}
@keyframes slide-out {
to { transform: translateX(-100%); }
}
@keyframes slide-in {
from { transform: translateX(100%); }
}
4. 部分級變形動畫（英雄轉換）
View Transitions API 的一個突出功能是它能夠自動跨頁面變換各個佈局元素，例如從卡片列表擴展到詳細資訊頁面標題的圖像。
設定 CSS 名稱綁定
若要將元素連結在一起，請將相同的 view-transition-name 屬性套用至傳出與傳入元素：
/* Card list image on the listing page */
.card-thumbnail {
view-transition-name: article-hero-image;
}
/* Featured header image on the detail page */
.detail-main-image {
view-transition-name: article-hero-image;
}
瀏覽器在頁面渲染期間匹配過渡名稱，自動計算大小和座標偏移，以將元素平滑動畫到新位置。
結論和瀏覽器支持
View Transitions API 支援基於 Chromium 的瀏覽器（Chrome、Edge）和 Safari，目前正在針對 Firefox 實作。
使用此 API，您可以使用 CSS 將高效能頁面轉換新增至您的 Web 應用程式。嘗試將主要路由變更包裝在 startViewTransition 中以親身體驗。