::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 |
浏览器兼容性
加载中…