發布日期：2026 年 3 月 27 日
元素範圍的檢視畫面轉換功能可同時執行多個檢視畫面轉換、允許進行中的檢視畫面轉換巢狀結構，以及解決您可能在文件範圍的檢視畫面轉換中遇到的 z-index 問題，同時保持網頁其餘部分的互動性。請參閱本指南，瞭解如何使用這些功能。
需要範圍更窄的範圍檢視轉場效果
使用 document.startViewTransition() (或透過其跨文件對應項目) 啟動相同文件檢視畫面轉場效果時，瀏覽器會將產生的檢視畫面轉場效果範圍限定在文件內。
更新回呼執行完畢，且瀏覽器擷取所有必要元素的快照後，產生的 ::view-transition 疊加層及其虛擬元素樹狀結構會附加至 :root 元素，如下例中的 html 所示。
html
├─ ::view-transition
│ └─ ::view-transition-group(root)
│ └─ ::view-transition-image-pair(root)
│ ├─ ::view-transition-old(root)
│ └─ ::view-transition-new(root)
├─ head
└─ body
└─ …
由於 ::view-transition 層會轉譯在轉場效果根層的頂端，因此可能會導致非預期的情況。舉例來說，參與檢視畫面轉換的元素可能會突然與其他非參與者重疊，或者元素在檢視畫面轉換期間可能不再由其祖先包裝函式裁剪。
現場示範
示範錄音
在 ::view-transition上pointer-events重新啟用 ，或使用巢狀檢視區塊轉換群組，即可解決文件範圍檢視區塊轉換造成的部分副作用。不過，這些方法無法解決所有問題。
舉例來說，在轉場效果啟動期間，具有 position: fixed 或快訊的元素仍會遭到文件範圍檢視區塊轉場效果遮蔽，這也稱為z-index 問題。
在下列示範中切換彈出式視窗，然後選取「隨機播放」按鈕，開始文件範圍的檢視畫面轉場效果。巢狀檢視區塊轉換群組可解決剪裁問題，但圖層問題依然存在。
現場示範
示範錄音
其中一種解決方法是為 popover 提供 view-transition-name，藉此在檢視區塊轉換期間擷取該元素。雖然這可能適用於單一執行個體，但維護起來很麻煩，而且會對快照程序造成不必要的負擔。
元素範圍檢視區塊轉場效果
元素範圍檢視區塊轉換功能可讓您在 DOM 的子樹狀結構上啟動檢視區塊轉換。您會在任意元素上呼叫 element.startViewTransition()，而不是呼叫 document.startViewTransition()，將檢視區塊轉換範圍限定於該元素。
在下列程式碼片段中，瀏覽器會在 <ul> 元素上啟動元素範圍的檢視區塊轉換。
document.querySelector('ul').startViewTransition({
callback: () => {
// … code that manipulates the contents of <ul>
},
})
您叫用 element.startViewTransition() 的元素 (例如 <ul>) 稱為轉場效果根元素或範圍。
當瀏覽器將檢視區塊轉場範圍設為某個元素時，該元素會與 DOM 的其餘部分隔離：
- 瀏覽器只會在範圍的子樹狀結構中尋找要建立快照的元素。
- 在建立快照的過程中 (執行
update回呼時)，只有範圍的算繪作業會停止。 - 產生的
::view-transition虛擬樹狀結構會注入轉換根。
舉例來說，使用 <ul> 時，DOM 樹狀結構在檢視區塊轉換期間會如下所示：
html
├─ head
└─ body
├─ ul
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(root)
│ │ ├─ ::view-transition-group-children(root)
│ │ │ └─ …
│ │ └─ ::view-transition-image-pair(root)
│ │ ├─ ::view-transition-old(root)
│ │ └─ ::view-transition-new(root)
│ ├─ li
│ ├─ li
│ └─ li
├─ button#showpopover
├─ button#reorder
└─ div#popover
└─ p
::view-transition 虛擬元素的大小和形狀與轉場效果根元素相同，且只會在轉場效果根元素上方算繪。因此，系統會遵守轉場效果根元素以外元素的圖層順序。
舉例來說，如果您在 <ul> 元素上方顯示快顯視窗，然後在 <ul> 元素上啟動元素範圍的檢視區塊轉場效果，快顯視窗不會遭到檢視區塊轉場效果的虛擬樹狀結構遮蔽。
請在下列試用版中試試看。這款遙控器有兩個按鈕，第一個按鈕會切換顯示/隱藏快顯視窗，第二個按鈕則會使用元素範圍的檢視區塊轉換，重新排序清單項目。
現場示範
示範錄音
由於系統使用元素範圍的檢視區塊轉換，因此在轉換處於啟用狀態時，彈出式視窗會保持在 <ul> 元素頂端顯示。
此外，<ul> 元素外部的元素 (例如按鈕) 仍可互動，因為這些元素不屬於範圍。
自行參與的範圍和巢狀檢視畫面轉換群組
在溢位遭到裁剪的元素上啟動元素範圍檢視區塊轉換時 (也就是 overflow 設為 hidden、scroll 或 clip 時)，您會發現檢視區塊轉換的內容在視覺上仍遭到裁剪。
這是因為元素範圍的檢視區塊轉換會自動處理下列事項：
- 範圍會自動
view-transition-name: root套用，因此會自動加入。 - 系統會自動套用
view-transition-group: contain範圍，啟用巢狀檢視區塊轉場效果群組。 - 如果範圍根層級會裁剪溢位內容，產生的
::view-transition-group-children(root)虛擬元素會自動使用overflow: clip裁剪內容，防止虛擬元素在視覺上溢出轉場效果根層級。
因此，您可以使用元素範圍檢視區塊轉換，只針對要擷取的元素使用 CSS。舉例來說，在清單範例中，CSS 只會將名稱新增至清單項目：
ul li {
view-transition-name: match-element;
view-transition-class: album;
}
請在下列試用版中試試看。您可以藉此覆寫自行參與的設定。如果範圍是自行參與 (預設行為)，一切都會如預期運作。如果範圍不是自行參與，邊框會立即變更，且內容會在轉場期間溢出包裝函式。
現場示範
示範錄音
如需參考，這個示範的自我參與虛擬樹狀結構如下所示：
html
├─ head
└─ body
├─ ul
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(root)
│ │ ├─ ::view-transition-group-children(root)
│ │ │ ├─ ::view-transition-group(item1)
│ │ │ │ └─ ::view-transition-image-pair(item1)
│ │ │ │ ├─ ::view-transition-old(item1)
│ │ │ │ └─ ::view-transition-new(item1)
│ │ │ ├─ ::view-transition-group(item2)
│ │ │ │ └─ …
│ │ │ …
│ │ └─ ::view-transition-image-pair(root)
│ │ ├─ ::view-transition-old(root)
│ │ └─ ::view-transition-new(root)
│ ├─ li
│ ├─ li
│ └─ li
└─ button#reorder
由於轉換根元素 (即 <ul> 元素) 會垂直裁剪內容，因此 ::view-transition-group-children(root) 也會自動套用裁剪效果。
元素範圍檢視區塊轉場效果並行
由於元素範圍的檢視區塊轉換作業會獨立執行，因此如果範圍不同，多個元素範圍的檢視區塊轉換作業可以同時執行。
以下示範有兩個重新排序按鈕，每個清單各一個。每個按鈕只會在各自的清單上啟動元素範圍的檢視畫面轉換。由於兩個清單的 DOM 樹狀結構不會重疊，因此兩個元素範圍的檢視區塊轉場效果可以同時獨立執行。
現場示範
示範錄音
這種隔離性質也讓您可以在不同範圍重複使用 view-transition-name 值。只要名稱在範圍內保持不重複，就不會發生衝突。
巢狀元素範圍檢視區塊轉換和 view-transition-name 容器
如果多個元素範圍檢視區塊轉換的 DOM 樹狀結構重疊，可能會發生 view-transition-name 值衝突。因此，瀏覽器會自動將 view-transition-scope: all 指派給作用中元素範圍的檢視區塊轉換，以減輕這項風險。
與 anchor-scope 範圍 anchor-name 值類似，view-transition-scope 屬性可確保 view-transition-name 值範圍為元素的子樹狀結構。這個屬性接受 none、要設為範圍的名稱清單，或 all (將所有值設為範圍)。
除了防止名稱溢出，view-transition-scope 也可防止元素及其內容遭到外部並行檢視區塊轉場效果擷取。快照程序會遍歷子樹狀結構，找出要建立快照的元素，並忽略套用 view-transition-scope: all 的元素 (及其整個子樹狀結構)。前提是這些元素已參與不同的元素範圍檢視畫面轉換。
以下示範是前一個示範的變化版本。除了隨機播放清單內容的兩個按鈕外，還提供「交換」按鈕，可交換清單。在 #lists-wrapper 上切換 .reversed 類別，即可處理交換作業。
現場示範
示範錄音
由於 view-transition-scope: all 會在隨機切換期間自動套用，因此您可以在隨機切換期間，同時啟動外部交換轉場效果。
由於 view-transition-scope: all 也會防止元素在外部轉場中進行快照，因此範例也會將 view-transition-name 值新增至包裝 <ul> 元素的元素。
#list1-wrapper, #list2-wrapper {
view-transition-name: attr(id type(<custom-ident>));
}
在這個示範中，第二個清單開始隨機播放，然後兩個清單都交換後，虛擬樹狀結構如下所示：
html
├─ head
└─ body
└─ #lists-wrapper.reversed (SCOPE)
├─ ::view-transition
│ └─ ::view-transition-group(lists-wrapper)
│ ├─ ::view-transition-group-children(lists-wrapper)
│ │ ├─ ::view-transition-group(list1-wrapper)
│ │ │ └─ ::view-transition-image-pair(list1-wrapper)
│ │ │ ├─ ::view-transition-old(list1-wrapper)
│ │ │ └─ ::view-transition-new(list1-wrapper)
│ │ └─ ::view-transition-group(list2-wrapper)
│ │ └─ ::view-transition-image-pair(list2-wrapper)
│ │ ├─ ::view-transition-old(list2-wrapper)
│ │ └─ ::view-transition-new(list2-wrapper)
│ └─ ::view-transition-image-pair(lists-wrapper)
│ ├─ ::view-transition-old(lists-wrapper)
│ └─ ::view-transition-new(lists-wrapper)
├─ div#list1-wrapper
│ ├─ ul
│ │ ├─ li#item1
│ │ ├─ li#item2
│ │ └─ li#item3
│ └─ button.reorder
└─ div#list2-wrapper
├─ ul (SCOPE)
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(list)
│ │ ├─ ::view-transition-group-children(list )
│ │ │ ├─ ::view-transition-group(item4)
│ │ │ │ └─ ::view-transition-image-pair(item4)
│ │ │ │ ├─ ::view-transition-old(item4)
│ │ │ │ └─ ::view-transition-new(item4)
│ │ │ ├─ ::view-transition-group(item5)
│ │ │ │ └─ …
│ │ │ …
│ │ └─ ::view-transition-image-pair(list)
│ │ ├─ ::view-transition-old(list)
│ │ └─ ::view-transition-new(list)
│ ├─ li#item4
│ ├─ li#item5
│ └─ li#item6
└─ button.reorder
瞭解詳情
如要進一步瞭解元素範圍的檢視區塊轉場效果，請參閱說明、css-view-transitions-2 規格和開放規格編輯清單。