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;
}
範例
以下堆疊導覽工具範例是一種 MPA，使用跨文件檢視轉換功能，在兩個不同文件之間進行轉換。視網頁是否深入瀏覽而定，頁面會推送至堆疊或跳出。
開始建構
全面瞭解跨文件檢視轉場效果。