Bramus
發布日期：2026 年 3 月 27 日
Chrome 147 推出元素範圍檢視區塊轉換功能，可讓您呼叫 Element.startViewTransition()，在 DOM 的子樹狀結構上啟動檢視區塊轉換。
這項功能可同時執行多個檢視區塊轉場效果、巢狀顯示進行中的檢視區塊轉場效果，並解決 position: fixed 內容的圖層問題，同時讓網頁的其餘部分保持互動。
變更項目
自從我們在 Chrome 140 中宣布這項功能已準備好供開發人員測試以來，我們與社群和 CSS 工作組合作，敲定詳細資料，特別是預設行為：
- 根據預設，範圍根目錄會自行參與。
- 範圍檢視轉換會使用巢狀檢視區塊轉換群組，自動包含巢狀虛擬元素。
- 如果範圍根項目的溢位遭到裁剪，範圍檢視畫面轉場效果中的
::view-transition-group-children()虛擬元素會自動裁剪內容。 - 元素範圍的檢視區塊轉場會在轉場期間，自動將
contain: layout和view-transition-scope: all套用至範圍根層級。
更新後，Chrome 穩定版 147 以上版本即可使用元素範圍的檢視區塊轉換。
示範
隨機排序清單
這個範例可讓您隨機排序每個清單中的項目。你也可以選取中間的按鈕，交換清單的位置。
現場示範
示範錄音
由於使用元素範圍的檢視區塊轉換，因此兩個清單可以同時執行隨機檢視區塊轉換。您也可以在重整清單項目的同時，啟動外部檢視畫面轉場效果，交換清單的位置。
我的巴塔哥尼亞之旅
「我的巴塔哥尼亞之旅」示範展示了元素範圍的檢視畫面轉場效果。這項試用版是以「重新想像網頁 UX」廣告活動影片為基礎建構而成。
使用下拉式選單篩選格線項目。使用每個格線項目的「新增」按鈕，將項目新增至選取項目清單 (顯示在側欄中)。
這個示範在三個位置使用元素範圍的檢視區塊轉換：
- 篩選項目時的項目格線。
- 將格線項目新增至所選項目清單時。
- 顯示所選項目清單的側欄。
閱讀指南
如要全面瞭解元素範圍的檢視區塊轉換，請參閱指南。這篇文章會說明如何實作元素範圍的檢視畫面轉場效果、解釋其他詳細資料，並提供更多示範。