檢視畫面轉場效果的新功能 (2025 年更新)

Bramus

發布日期：2025 年 10 月 8 日

自 2023 年推出同文件檢視畫面轉場效果以來，許多情況都發生了變化。

2024 年，我們推出了跨文件檢視區塊轉換，並新增了 view-transition-class 和檢視區塊轉換類型等改良功能。此外，Safari 也開始支援檢視區塊轉換。

這篇文章將概略說明 2025 年的檢視區塊轉場效果異動。

更完善的瀏覽器和架構支援

同文件檢視畫面轉換即將成為基準 Newly available

Interop 2025 的重點領域是 View Transition API，特別是具有 document.startViewTransition(updateCallback)、view-transition-class 的同文件檢視區塊轉場效果、具有 view-transition-name: match-element 的自動命名，以及 :active-view-transition CSS 選取器。

Firefox 預計在即將推出的 Firefox 144 版本中加入這些功能，該版本將於 2025 年 10 月 14 日成為穩定版。這會讓這些功能成為 Baseline Newly 可用功能。

React 核心現在支援 View Transition API

今年，React 團隊致力於在 React 核心中加入檢視區塊轉場效果。他們在 4 月宣布react@experimental支援這項功能，並在本週的 React Conf 中將支援功能移至 react@canary，表示設計即將完成。

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

如需所有詳細資料，請參閱 React 的<ViewTransition>文件，或觀看 Aurora Scharff 的這場演講，瞭解這個主題的簡介。

近期推出的功能

使用 view-transition-name: match-element 自動命名元素

如要將元素標示為檢視畫面轉換的一部分，請為該元素提供 view-transition-name。這是檢視區塊轉場效果的關鍵，因為這項功能可解鎖在兩個不同元素之間轉場等功能。每個元素在轉場效果的每一側都有相同的 view-transition-name 值，而檢視區塊轉場效果會為您處理這些事。

不過，如果轉換的元素數量很多，但實際上沒有變化，為元素命名就會變得相當麻煩。如果清單中有 100 個元素會移動，您就必須想出 100 個不重複的名稱。

有了 match-element，您不必執行上述所有操作。將這個值做為 view-transition-name 的值時，瀏覽器會根據每個相符元素的 ID，為這些元素產生內部 view-transition-name。

這個示範採用這種做法。系統會為列中的每張資訊卡自動產生 view-transition-name。

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

進入或離開的卡片會獲得明確名稱。這個名稱會用於 CSS，將特定動畫附加至該快照。所有其他資訊卡的快照都會使用與其相關聯的 view-transition-class 設定樣式。

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

開發人員工具現在會顯示使用 view-transition-class 的虛擬元素指定規則

如要偵錯檢視區塊轉場效果，可以使用開發人員工具的「動畫」面板暫停所有動畫。這樣一來，您就有時間檢查虛擬元素，不必擔心檢視區塊轉場效果會達到完成狀態。你甚至可以手動瀏覽動畫時間軸，查看轉場效果的播放方式。

先前檢查 ::view-transition-* 虛擬元素時，Chrome 開發人員工具不會顯示以其設定 view-transition-class 為目標的虛擬規則。Chrome 139 新增了這項功能，因此行為有所改變。

Chrome 140 以上版本提供巢狀檢視區塊轉場效果群組

檢視區塊轉換作業執行時，系統會將擷取的元素算繪到虛擬元素樹狀結構中。根據預設，產生的樹狀結構是「扁平」的。這表示 DOM 中的原始階層會遺失，而所有擷取的檢視區塊轉換群組都會是單一 ::view-transition 虛擬元素下的同層級元素。

這種扁平樹狀結構方法適用於許多用途，但如果使用剪裁或 3D 轉換等視覺效果，就會產生問題。這些項目需要樹狀結構中的某個階層。

有了「巢狀檢視區塊轉場效果群組」，您現在可以將 ::view-transition-group 虛擬元素彼此巢狀化。如果檢視區塊轉場效果群組是巢狀結構，轉場期間可能會還原裁剪等效果。

瞭解如何使用檢視區塊轉場效果群組

虛擬元素現在會繼承更多動畫屬性

在 ::view-transition-group(…) 虛擬元素上設定其中一個 animation-* 長手屬性時，所含的 ::view-transition-image-pair(…)、::view-transition-old(…) 和 ::view-transition-new(…) 也會繼承該屬性。這項功能非常實用，因為它會自動讓 ::view-transition-new(…) 和 ::view-transition-old(…) 之間的淡入淡出效果與 ::view-transition-group(…) 同步。

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

一開始，這項繼承功能僅限於 animation-duration 和 animation-fill-mode (以及後來的 animation-delay)，但現在已擴大範圍，可繼承更多動畫簡寫。

支援檢視畫面轉場效果的瀏覽器現在應該會在使用者代理程式樣式表中加入下列項目

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Chrome 140 版已推出虛擬元素，可繼承更多屬性。

finished Promise 回呼的執行作業不再等待影格

使用 finished Promise 執行回呼時，Chrome 過去會等待產生影格，再執行該邏輯。如果指令碼嘗試保留視覺上相似的狀態，在動畫結束時移動某些樣式，可能會導致閃爍。

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

這項時間點的變更可將檢視區塊轉場效果清除步驟移至生命週期完成後非同步執行，藉此修正問題。這樣可確保在 finished Promise 解析時產生的視覺影格仍會維持檢視區塊轉場結構，避免閃爍。

這項時間碼變更已在 Chrome 140 中發布。

即將推出的新功能

今年還沒結束，因此我們還有時間推出更多功能。

Chrome 140 已開放測試範圍檢視區塊轉場效果

範圍檢視區塊轉場效果是 View Transition API 的建議擴充功能，可讓您在任何 HTMLElement 上呼叫 element.startViewTransition() (而非 document.startViewTransition())，在 DOM 的子樹狀結構上啟動檢視區塊轉場效果。

範圍轉換可讓多個檢視區塊轉換同時執行 (只要轉換根目錄不同即可)。系統只會在該子樹狀結構上防止指標事件 (您可以重新啟用)，而不是整個文件。此外，這些屬性可讓轉換根目錄外的元素繪製在範圍檢視區塊轉換的頂端。

在下列範例中，您可以點選其中一個按鈕，在容器內移動圓點。您可以透過文件範圍或元素範圍的檢視畫面轉場效果，瞭解兩者的不同行為。

從 Chrome 140 開始，只要在 chrome://flags 中啟用「Experimental Web Platform features」(實驗性網路平台功能) 旗標，即可測試這項功能。我們正積極徵求開發人員的意見。

在 Chrome 142 中，「::view-transition」的位置將從「fixed」變更為「absolute」

目前使用 position: fixed 定位 ::view-transition 虛擬元素。根據 CSS 工作群組的決議，這項屬性將變更為 position: absolute。

這個 position 值從 fixed 變更為 absolute (Chrome 142 即將推出)，在視覺上不會有任何變化，因為 ::view-transition 虛擬元素的包含區塊本來就是快照包含區塊。唯一可觀察到的效果是執行 getComputedStyle 時，position 值會有所不同。

document.activeViewTransition即將在 Chrome 142 中推出

啟動檢視區塊轉場效果時，系統會建立 ViewTransition 例項。這個物件包含多項 Promise 和功能，可追蹤轉場進度，以及允許略過轉場或修改轉場類型等操作。

Chrome 現在提供代表這個物件的 document.activeViewTransition 屬性，您不必再手動追蹤這個執行個體。如果沒有進行任何轉場效果，值為 null。

如果是相同文件的檢視畫面轉換，系統會在您呼叫 document.startViewTransition 時設定值。如要進行跨文件檢視區塊轉換，您可以在 pageswap 和 pagereveal 事件中存取該 ViewTransition 例項。

Chrome 142 即將支援 document.activeViewTransition。

使用 ViewTransition.waitUntil 防止檢視區塊轉換自動完成

當所有動畫完成時，檢視區塊轉場效果會自動進入 finished 狀態。如要避免系統自動完成，請在近期內使用 ViewTranistion.waitUntil。傳遞 Promise 時，只有在傳遞的 Promise 也已解決時，ViewTransition 才會達到 finished 狀態。

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

這項變更將於今年稍晚推出，屆時您就能等待 fetch，或更輕鬆地實作捲動驅動的檢視區塊轉場效果。

後續步驟

如您所見，自 2023 年首次推出檢視畫面轉場效果以來，我們一直不斷努力。我們期待在日後推出範圍檢視區塊轉換功能，也歡迎隨時提供意見。

如果您對檢視區塊轉場效果有疑問，請透過社群媒體與我們聯絡。如要提出檢視區塊轉場效果的功能要求，請前往 CSS WG 提出。如果遇到錯誤，請回報 Chromium 錯誤，讓我們瞭解情況。