::view-transition-image-pair()
::view-transition-image-pair() CSS 偽元素表示檢視過渡的“舊”和“新”檢視狀態（過渡前後）的容器。
在檢視過渡期間，::view-transition-image-pair() 會被包含在相關的偽元素樹中，如檢視過渡偽元素樹中所述。它始終是::view-transition-group()的子元素。在子元素方面，它可以擁有::view-transition-new()或::view-transition-old()，或者兩者都有。
在 UA 樣式表中，::view-transition-image-pair() 具有以下預設樣式：
css
:root::view-transition-image-pair(*) {
position: absolute;
inset: 0;
animation-duration: inherit;
animation-fill-mode: inherit;
animation-delay: inherit;
}
在檢視過渡期間，::view-transition-image-pair() 在檢視過渡樣式表中被設定為isolation: isolate，以便其子元素可以在不影響其他視覺輸出的情況下以非正常混合模式進行混合。
語法
css
::view-transition-image-pair([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
/* ... */
}
引數
*-
通用選擇器 (
*)；選擇頁面上的所有檢視過渡組。 根-
使偽元素匹配使用者代理建立的預設
root檢視過渡快照組，該組用於包含整個頁面的檢視過渡。此組包含任何未透過view-transition-name屬性分配到其自己的特定檢視過渡快照組的元素。 <pt-name-selector>-
設定為
view-transition-name屬性值的<custom-ident>。 <pt-class-selector>-
設定為
view-transition-class屬性值並前面帶有句點（.）的<custom-ident>。
示例
css
::view-transition-image-pair(root) {
isolation: auto;
}
::view-transition-image-pair(.card) {
isolation: isolate;
}
規範
| 規範 |
|---|
| CSS 檢視過渡模組第 1 級 # ::view-transition-image-pair |
瀏覽器相容性
載入中…