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