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

Bramus

發布日期：2025 年 10 月 8 日

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

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

這篇文章將概略說明 2025 年檢視區塊轉換的異動內容。

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

同文件檢視畫面轉換即將成為基準功能

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 日成為穩定版。這些功能就會成為「基準」層級的新功能。

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 承諾解析度產生的視覺影格仍維持檢視畫面轉場結構，避免閃爍。

這項時間碼變更已在 Chrome 140 中推出。

即將推出的新功能

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

Chrome 140 已開放測試範圍檢視區塊轉換

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

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

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

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

在 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 錯誤，讓我們瞭解情況。