商洽聯繫
# 科技新知

View Transition：簡介＆技術實現

作者：Oliver Xiong

日期：2025-04-28

| 前言

在現代網頁設計中，使用者體驗已是核心關鍵，而流暢的視覺轉場效果則是打造優質體驗的重要元素。身為前端開發者，我們致力於提供具備連貫性與流暢感的動態體驗，讓畫面變化更加自然。

過去在研究 Scroll-driven Animation 時，我發現滾動式動畫確實能提升頁面的互動性與吸引力，但這類動態效果僅侷限於滾動行為，對於其他操作（例如狀態變更、頁面切換等）仍可能出現明顯的視覺斷層。這也促使我開始探索 View Transition API — — 一項專為改善 DOM 狀態變更與頁面轉場效果而生的新技術。

View Transition API 為前端開發帶來了更優雅的解決方案，使我們能夠在不同畫面狀態間創造流暢的轉場效果，無論是單頁式應用 (Single Page Application, SPA) 的狀態改變，或是多頁式應用 (Multiple Page Application, MPA) 的頁面切換，都能透過這項技術大幅提升視覺體驗，也為打造更細緻的使用者體驗開啟了全新的可能。

在這篇文章中，我將分享對 View Transition API 的研究心得，從基本概念到實際應用案例，希望能為同樣熱衷於網頁動態體驗的開發者提供實用的參考，打造更自然、更沉浸的網頁體驗！

| 簡介

圖View Transition

View Transition

View Transition 是一種建立平滑視覺轉場的新型網頁技術，使開發者能夠在網頁導航或 DOM 狀態變更時創建動畫效果，提升用戶體驗。

📌 偽元素樹狀結構

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

View Transition 使用一系列偽元素來實現轉場效果，這個樹狀結構代表了過渡期間的視覺層次：

  • ::view-transition：最外層容器，包含整個轉場過程。
  • ::view-transition-group(root)：轉場的分組元素。
  • ::view-transition-image-pair(root)：包含舊狀態和新狀態的容器。
  • ::view-transition-old(root)：表示轉場前的狀態截圖。
  • ::view-transition-new(root)：表示轉場後的狀態截圖。

📌 運作流程

  1. 捕捉狀態：當觸發轉場效果時，瀏覽器會捕捉當前頁面的視覺狀態 (old)。
  2. DOM 更新：在幕後更新 DOM 結構到新狀態。
  3. 捕捉新狀態：瀏覽器捕捉更新後的視覺狀態 (new)。
  4. 建立轉場：瀏覽器創建上述偽元素結構。
  5. 執行動畫：使用 CSS 控制這些偽元素的動畫效果。
  6. 完成過渡：動畫結束後，偽元素結構被移除，顯示最終狀態。

| 技術實現：View Transition API

📌 CSS

  • view-transition-name：CSS 屬性，用於指定元素的唯一轉場名稱，以確保該元素能在新舊畫面之間正確匹配。（view-transition-name 必須是唯一值，如果多個元素使用相同的 view-transition-name，系統將不會執行轉場效果。）
    • 語法 
      .my-element {
  view-transition-name: my-unique-element;
}

  • view-transition-class：CSS 屬性，用於設定元素在轉場期間要套用的 class。當轉場動畫觸發時，系統會自動將此 class 中定義的樣式套用到指定元素上。
    • 語法 
      .my-element {
  view-transition-name: my-unique-element;
  view-transition-class: my-transition-class;
}

.my-transition-class {
  /* 轉場期間的特殊樣式 */
}

  • @view—transition：CSS 規則，用來控制畫面轉場的行為。
    • 語法 
      @view-transition {
  navigation: auto;
}
      • navigation 屬性
        navigation說明
        none禁用 View Transition。
        auto自動啟用 View Transition，適用於 <a> 或 window.navigation.navigate()。
        manual需手動觸發，例如 document.startViewTransition()。

  • ::view-transition：CSS 偽元素，用於選取 View Transition 遮罩（overlay）的根元素，並可設定轉場效果的樣式。
    • 語法 
      ::view-transition {
  /* 轉場樣式 */
}
    • 預設樣式 
      html::view-transition {
  position: fixed;
  inset: 0;
}

  • ::view-transition-group()：CSS 偽元素選擇器，用於選取所有具有相同 view-transition-name 的元素群組，並設定其轉場效果樣式。
    • 語法 
      ::view-transition-group(transition-identifier) {
  /* 轉場樣式 */
}
      • transition-identifier 參數
        transition-identifier說明
        *選取所有的轉場群組，包含 ::view-transition-group(root) 和 ::view-transition-group(<custom-ident>)。
        root選取整個頁面的根轉場群組，此群組包含任何未透過 view-transition-name 指定轉場群組的元素。
        <custom-ident>選取具備特定 view-transition-name 的轉場群組。
    • 預設樣式 
      html::view-transition-group(*) {
  position: absolute;
  top: 0;
  left: 0;
  
  animation-duration: 0.25s;
  animation-fill-mode: both;
}

  • ::view-transition-image-pair()：CSS 偽元素選擇器，用於選取 View Transition 中「舊」畫面和「新」畫面的容器元素。此元素作為 ::view-transition-group() 的直接子元素，同時是 ::view-transition-old() 和 ::view-transition-new() 的父元素。
    • 語法 
      ::view-transition-image-pair(transition-identifier) {
  /* 轉場樣式 */
}
      • transition-identifier 參數
        transition-identifier說明
        *選取所有的轉場圖像對，包含 ::view-transition-image-pair(root) 和 ::view-transition-image-pair(<custom-ident>)。
        root選取整個頁面的轉場圖像對，此群組包含任何未透過 view-transition-name 指定轉場群組的元素。
        <custom-ident>選取具備特定 view-transition-name 的轉場圖像對。
    • 預設樣式 
      :root::view-transition-image-pair(*) {
  position: absolute;
  inset: 0;
  
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}
    • 實際功能與用途
      • 設定 mix-blend-mode：控制新、舊畫面如何混合在一起。 
        ::view-transition-image-pair(transition-identifier) {
  mix-blend-mode: difference;
}
      • 設定 isolation：控制元素如何與其他元素混合。 
        ::view-transition-image-pair(transition-identifier) {
  isolation: auto; /* 或 isolation: isolate; */
}
      • 設定 z-index：控制轉場圖像對在頁面上的堆疊順序。 
        ::view-transition-image-pair(transition-identifier) {
  z-index; 100;
}

  • ::view-transition-old()：CSS 偽元素選擇器，用於選取轉場前的「舊」畫面，讓開發者可以自訂舊畫面淡出時的動畫效果。
    • 語法 
      ::view-transition-old(transition-identifier) {
  /* 轉場樣式 */
}
      • transition-identifier 參數
        transition-identifier說明
        *選取所有的轉場快照群組，包含 ::view-transition-old(root) 和 ::view-transition-old(<custom-ident>)。
        root選取整個頁面的轉場快照群組，此群組包含任何未透過 view-transition-name 指定轉場快照群組的元素。
        <custom-ident>選取具備特定 view-transition-name 的轉場快照群組。
    • 預設樣式 
      :root::view-transition-old(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;
  
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

  • ::view-transition-new()：CSS 偽元素選擇器，用於選取轉場後的「新」畫面，可自行設置進入「新」狀態的動畫效果。
    • 語法 
      ::view-transition-old(transition-identifier) {
  /* 轉場樣式 */
}
      • transition-identifier 參數
        transition-identifier說明
        *選取所有的轉場快照群組，包含 ::view-transition-new(root) 和 ::view-transition-new(<custom-ident>)。
        root選取整個頁面的轉場快照群組，此群組包含任何未透過 view-transition-name 指定轉場快照群組的元素。
        <custom-ident>選取具備特定 view-transition-name 的轉場快照群組。
    • 預設樣式 
      :root::view-transition-new(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;
  
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

📌 JavaScript

  • document.startViewTransition()：View Transition API 的核心方法，用於處理網頁元素在狀態變化（DOM 更新）時的轉場效果，例如頁面切換或 UI 改變。
    • 語法 
      document.startViewTransition();
document.startViewTransition(updateCallback);
document.startViewTransition({updateCallback, types});
      • 參數
        參數說明
        updateCallback非必要的回呼函數 (callback)，用於更新 DOM 元素，此函數可以是同步的或是返回 Promise 的非同步函式。
        types為含有類型的陣列，用於設定轉場的類型，預設為空集合。
      • 返回值返回一個 ViewTransition 物件，用於控制和監聽轉場生命週期。
    • ViewTransition 物件的主要屬性和方法
      • ready：一個 Promise，會在 DOM 舊狀態快照完成時執行。
      • finished：一個 Promise，會在轉場動畫完成時執行。
      • updateCallbackDone：一個 Promise，會在 updateCallback 完成後執行，用於監控 DOM 更新的時機與狀態。
      • skipTransition()：用於跳過轉場動畫的方法，由於 DOM 變更與轉場動畫互相獨立，因此此方法不會影響 updateCallback 的執行。
      • types：類似 Set 的物件，可保留畫面的轉場類型，可透過 add()、clear()、delete() 等方法操作，並於轉場結束後清除類型。
    • 補充
      View Transition API 的設計目的是「包裝」DOM 變更並建立轉場效果。然而，轉場應被視為強化功能，意即當 DOM 變更成功但轉場失敗時，應用程式不應進入「錯誤」狀態。理想情況下，轉場不應失敗，但即使失敗，也不會影響其他使用者體驗。

  • pageswap：事件類型，在網頁因頁面跳轉而即將卸載（unmount）時觸發。此事件與當前頁面相關聯，並標誌著導航過程的結束。
    • 語法 
      window.addEventListener("pageswap", handler);
    • 發生場景
      • 點選連結時即將離開目前頁面。
      • 使用瀏覽器的上一頁或下一頁按鈕。
      • 透過 JavaScript 執行頁面跳轉。

  • pagereveal：事件類型，在網頁首次完成渲染時觸發。此事件與目標頁面相關聯，並標誌著導航過程的開始。
    • 語法 
      window.addEventListener("pagereveal", handler);
    • 發生場景
      • 載入新頁面。
      • 從瀏覽器的後退／前進快取（bfcache）中啟動網頁文件。
      • 從預渲染（prerender）中啟動網頁文件。

  • PageSwapEvent：事件物件，作為 pageswap 事件處理函數的參數，用於控制離開頁面的轉場效果。
    • 屬性
      • viewTransition：唯讀屬性，包含一個 ViewTransition 物件，表示頁面間導航時的活動畫面轉換。
      • activation：唯讀屬性，包含一個 NavigationActivation 物件，其中包含同源 (same-origin) 導航的類型、當前頁面及目標頁面的歷史記錄。如果導航過程中有任何非同源 (cross-origin) 的 URL，則會返回 null。

  • PageRevealEvent：事件物件，作為 pagereveal 事件處理函數的參數，用於控制跳轉到新頁面的轉場效果。
    • 屬性
      • viewTransition：唯讀屬性，包含一個 ViewTransition 物件，表示頁面間導航時的活動畫面轉換。

本文轉載自筆者於 Medium 發表的文章，欲了解更多詳情，歡迎點擊連結前往閱讀。

更多資訊公告