View Transition API
檢視過渡 API 提供了一種機制，可以輕鬆地在不同的網站檢視之間建立動畫過渡。這包括在單頁應用 (SPA) 的 DOM 狀態之間進行動畫，以及在多頁應用 (MPA) 的文件導航之間進行動畫。
概念與用法
檢視過渡是一種流行的設計選擇，可以減少使用者的認知負擔，幫助他們保持上下文，並在應用程式狀態或檢視之間移動時減少感知到的載入延遲。
然而，在 Web 上建立檢視過渡歷史上一直很困難
- 單頁應用 (SPA) 中狀態之間的過渡通常需要編寫大量的 CSS 和 JavaScript 來
- 處理舊內容和新內容的載入和定位。
- 對舊狀態和新狀態進行動畫以建立過渡。
- 阻止使用者意外與舊內容互動導致問題。
- 在過渡完成後移除舊內容。當新舊內容同時存在於 DOM 中時，還可能導致可訪問性問題，例如閱讀位置丟失、焦點混亂以及奇怪的即時區域宣告行為。
- 跨文件檢視過渡（即，在 MPA 中不同頁面之間的導航）歷史上是不可能的。
檢視過渡 API 提供了一種簡單的方法來處理上述兩種用例所需的檢視更改和過渡動畫。
建立使用瀏覽器預設過渡動畫的檢視過渡非常快捷，並且有功能允許您自定義過渡動畫和操作檢視過渡本身（例如指定跳過動畫的條件），這適用於 SPA 和 MPA 檢視過渡。
有關更多資訊，請參閱 使用檢視過渡 API。
介面
ViewTransition-
表示一個檢視過渡，並提供功能來響應過渡到達不同狀態（例如，準備執行動畫，或動畫已完成）或完全跳過過渡。
其他介面的擴充套件
Document.startViewTransition()-
啟動一個新的同文檔 (SPA) 檢視過渡，並返回一個
ViewTransition物件來表示它。 PageRevealEvent-
pagereveal事件的事件物件。在跨文件導航期間，如果檢視過渡是由導航觸發的，它允許您從導航到的文件中操作相關的檢視過渡（提供對相關ViewTransition物件的訪問）。 PageSwapEvent-
pageswap事件的事件物件。在跨文件導航期間，如果檢視過渡是由導航觸發的，它允許您從導航前的文件操作相關的檢視過渡（提供對相關ViewTransition物件的訪問）。它還提供對導航型別、當前和目標文件歷史記錄條目的資訊訪問。 Window的pagereveal事件Window的pageswap事件-
當文件因導航即將解除安裝時觸發。
HTML 新增功能
<link rel="expect">-
標識與關聯文件中最關鍵的內容，供使用者首次檢視頁面。文件渲染將被阻止，直到關鍵內容被解析，從而確保所有支援的瀏覽器都有一個一致的首次繪製 — 因此，也有一個一致的檢視過渡。
CSS 新增功能
@ 規則
@view-transition-
對於跨文件導航，
@view-transition用於讓當前和目標文件選擇加入檢視過渡。
屬性
view-transition-name-
指定檢視過渡快照中選定元素將參與其中，這使得元素在檢視過渡期間可以與頁面其餘部分分開進行動畫。
view-transition-class-
為具有
view-transition-name的選定元素提供了一種額外的樣式設定方法。
偽類
:active-view-transition-
在檢視過渡進行時匹配元素。
:active-view-transition-type()-
在特定型別檢視過渡進行時匹配元素。
偽元素
::view-transition-
檢視過渡覆蓋的根，其中包含所有檢視過渡，並位於所有其他頁面內容之上。
::view-transition-group()-
單個檢視過渡的根。
::view-transition-image-pair()-
檢視過渡的舊檢視和新檢視的容器 — 過渡之前和之後。
::view-transition-old()-
過渡前的舊檢視的靜態快照。
::view-transition-new()-
過渡後的新檢視的即時表示。
示例
- 基本檢視過渡 SPA 演示：一個帶有檢視過渡的基本圖片庫演示，具有舊影像和新影像、舊字幕和新字幕之間的獨立動畫。
- 基本檢視過渡 MPA 演示：一個演示跨文件 (MPA) 檢視過渡用法的示例兩頁網站，在兩個頁面導航之間提供自定義的“向上滑動”過渡。
- 檢視過渡
match-element演示：一個帶有動畫列表項的 SPA，演示瞭如何使用view-transition-name屬性的match-element值來為單個元素設定動畫。 - HTTP 203 播放列表：一個影片播放器演示應用，其中包含多個不同的 SPA 檢視過渡，其中許多都在 使用檢視過渡 API 實現流暢的過渡 中進行了說明。
- Chrome DevRel 檢視過渡演示：一系列檢視過渡 API 演示。
規範
| 規範 |
|---|
| CSS 檢視過渡模組第 1 級 |
瀏覽器相容性
api.Document.startViewTransition
載入中…
css.at-rules.view-transition
載入中…
另見
- developer.chrome.com 上的 使用檢視過渡 API 實現流暢的過渡 (2024)
- stackdiary.com 上的 檢視過渡 API：建立流暢的頁面過渡 (2023)
- DebugBear 上的 檢視過渡 API：無需框架的單頁應用 (2024)