檢視轉換 API

檢視轉換是減少使用者認知負荷、幫助使用者保持上下文以及在使用者在應用程式的不同狀態或檢視之間移動時減少感知載入延遲的流行設計選擇。

但是，在 Web 上建立檢視轉換在歷史上一直很困難

• 單頁應用程式 (SPA) 中狀態之間的轉換往往需要編寫大量的 CSS 和 JavaScript 來
  • 處理舊內容和新內容的載入和定位。
  • 對舊狀態和新狀態進行動畫處理以建立轉換。
  • 阻止意外使用者與舊內容的互動導致問題。
  • 在轉換完成後刪除舊內容。無障礙問題（例如閱讀位置丟失、焦點混亂以及奇怪的即時區域公告行為）也可能因新舊內容同時出現在 DOM 中而導致。
• 跨文件檢視轉換（即 MPA 中不同頁面之間的導航）在歷史上是不可能的。

檢視轉換 API 為以上兩種用例提供了處理所需檢視更改和轉換動畫的簡便方法。

建立使用瀏覽器預設轉換動畫的檢視轉換非常快，並且有一些功能允許您自定義轉換動畫並操作檢視轉換本身（例如指定跳過動畫的條件），適用於 SPA 和 MPA 檢視轉換。

有關更多資訊，請參閱 使用檢視轉換 API。

ViewTransition

表示檢視轉換，並提供功能以響應轉換到達不同狀態（例如準備好執行動畫或動畫完成）或完全跳過轉換。

Document.startViewTransition()

啟動新的同一文件 (SPA) 檢視轉換，並返回一個 ViewTransition 物件來表示它。

PageRevealEvent

用於 pagereveal 事件的事件物件。在跨文件導航期間，它允許您從要導航到的文件中操作相關檢視轉換（提供對相關 ViewTransition 物件的訪問），如果檢視轉換是由導航觸發的。

PageSwapEvent

用於 pageswap 事件的事件物件。在跨文件導航期間，它允許您從要導航到的文件中操作相關檢視轉換（提供對相關 ViewTransition 物件的訪問），如果檢視轉換是由導航觸發的。它還提供對導航型別和當前以及目標文件歷史記錄條目的資訊的訪問。

The Window pagereveal 事件

在首次呈現文件時觸發，無論是從網路載入新文件還是啟用文件（無論是來自 後退/前進快取 (bfcache) 還是 預渲染）。

The Window pageswap 事件

在由於導航即將解除安裝文件時觸發。

<link rel="expect">

標識與使用者對頁面的初始檢視相關的文件中最關鍵的內容。文件呈現將被阻止，直到關鍵內容被解析，以確保在所有支援的瀏覽器中一致的第一次繪製 - 因此，檢視轉換。

@view-transition

在跨文件導航的情況下，@view-transition 用於選擇當前和目標文件以進行檢視轉換。

view-transition-name

為選定元素提供單獨的標識名稱，並使其參與與根檢視轉換不同的檢視轉換 - 如果指定 none 值，則不進行任何檢視轉換。

::view-transition

檢視轉換疊加的根，它包含所有檢視轉換，並位於所有其他頁面內容之上。

::view-transition-group()

單個檢視轉換的根。

::view-transition-image-pair()

檢視轉換的舊檢視和新檢視的容器 - 在轉換之前和之後。

::view-transition-old()

轉換前的舊檢視的靜態快照。

::view-transition-new()

轉換後的新檢視的即時表示。

• 基本檢視轉換 SPA 演示：帶有檢視轉換的基本影像庫演示，在舊影像和新影像以及舊標題和新標題之間提供單獨的動畫。
• 基本檢視轉換 MPA 演示：一個示例兩頁網站，演示跨文件 (MPA) 檢視轉換的使用，在兩個頁面之間導航時提供自定義的“向上滑動”轉換。
• HTTP 203 播放列表：一個影片播放器演示應用程式，它具有幾個不同的 SPA 檢視轉換，其中許多在 使用檢視轉換 API 進行平滑簡易轉換 中有解釋。
• Chrome DevRel 團隊成員列表：一個基本的團隊個人資料頁面應用程式，演示瞭如何使用 pagereveal 和 pageswap 事件根據“from”和“to”URL 自定義跨文件檢視轉換的出站和入站動畫。

• 使用檢視轉換 API 進行平滑簡易轉換
• 檢視轉換 API：建立平滑的頁面轉換