View Transition API 可讓您在網站上的不同檢視畫面之間建立無縫的視覺轉場效果。如此一來，不管使用者瀏覽的網站是多頁面應用程式 (MPA) 還是單頁應用程式 (SPA)，瀏覽網站時都能獲得更引人注目的視覺效果。
使用觀看轉場效果的典型情況包括：
- 產品資訊頁面中的縮圖，在產品詳細資料頁面中轉換為原尺寸產品圖片。
- 固定導覽列，在您從一個頁面轉到另一個頁面時會保持在原位。
- 篩選後，項目會移動至格狀區域中。
實作檢視畫面轉場效果
檢視畫面轉場效果不受限於特定應用程式架構或架構，且不只可在單一文件中觸發，也可在兩個不同文件之間觸發。
這兩種檢視畫面轉場效果都依賴相同的建構模塊和原則：
- 瀏覽器會擷取舊狀態和新狀態的快照。
- 在渲染作業遭到抑制時，DOM 會更新。
- 轉場效果由 CSS 動畫提供。
這兩種事件的差異在於觸發方式。
同一文件的檢視畫面轉場效果
當檢視畫面轉場在單一文件中執行時，稱為「同文件檢視畫面轉場」。這種情況通常是在單頁應用程式 (SPA) 中發生。從 Chrome 111 開始，Chrome 支援相同文件檢視畫面的轉場效果。
觸發方式
呼叫 document.startViewTransition 觸發同一個文件檢視畫面的轉場效果：
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
範例
下列卡片範例中的 SPA 會使用相同文件檢視轉場效果，在卡片新增或移除時為卡片建立動畫。
開始建構
請參閱專屬說明文件頁面，瞭解有關同一個文件檢視畫面的轉場效果的所有資訊。
跨文件檢視畫面轉場
如果兩個不同文件之間的檢視模式轉換，稱為「跨文件檢視轉換」。這通常是 MPA 的情況。Chrome 126 以上版本支援跨文件檢視畫面的轉場效果。
瀏覽器支援
觸發方式
如果兩個頁面均選擇接收，就會由同一來源的跨文件導覽觸發跨文件檢視轉換。換句話說，沒有任何 API 可用來啟動跨文件檢視畫面轉場效果。使用者按下連結時，該次點擊會觸發瀏覽轉換。
如要選擇啟用，請使用下列 CSS 程式碼片段：
@view-transition {
navigation: auto;
}
範例
以下的Stack Navigator 範例是使用跨文件檢視畫面轉場效果的 MPA，可在兩個不同的文件之間進行轉場。視您是否要深入瀏覽導覽內容而定，系統會將頁面推送至堆疊或彈出。
開始建構
瞭解跨文件檢視畫面轉場的所有相關資訊。