可供開發人員測試：範圍內的檢視區塊轉場效果

Bramus

發布日期：2025 年 9 月 10 日

範圍檢視區塊轉場效果是 View Transition API 的建議擴充功能，可讓您在 DOM 的子樹狀結構上啟動檢視區塊轉場效果。從 Chrome 140 開始，只要在 chrome://flags 中啟用「Experimental Web Platform features」(實驗性網路平台功能) 旗標，即可測試這項功能。我們正積極徵求開發人員的意見。

簡介

如要啟動範圍檢視區塊轉場效果，請在套用 contain: layout 的任何 HTMLElement 上呼叫 element.startViewTransition() (而非 document.startViewTransition())。

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

結果是範圍限定於所選 HTMLElement 子樹狀結構的檢視區塊轉場效果，產生的 ::view-transition 虛擬樹狀結構會注入該 HTMLElement。HTMLElement 是轉場動畫的容器。

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

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

如要瞭解範圍內檢視區塊轉換的相關資訊，請參閱範圍內檢視區塊轉換說明。

示範

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

現場示範

示範錄音

使用範圍檢視區塊轉換時，點會在轉換期間保持遭父項裁剪的狀態。此外，顯示時，圓點不會繪製在彈出式視窗上。

歡迎提供意見

我們希望向網頁開發人員社群徵求意見回饋，瞭解：

  • Scoped View Transitions API 的形狀。
  • 功能運作良好或不如預期的使用案例。
  • 如何解決自行參與範圍相關問題。

如要分享意見，請在 CSS WG 問題 #9890 中留言。提供意見回饋前，請先瞭解已知問題和限制。

如果遇到錯誤，請回報 Chromium 錯誤，讓我們瞭解情況。