::view-transition-image-pair

有限可用性

此功能不是基线功能，因为它在一些最常用的浏览器中无法使用。

::view-transition-image-pair CSS 伪元素 表示 视图过渡 的“旧”和“新”视图状态的容器——过渡前和过渡后。

在视图过渡期间，::view-transition-image-pair 被包含在关联的伪元素树中，如 视图过渡伪元素树 中所述。它始终是 ::view-transition-group 的子元素。在子元素方面，它可以包含 ::view-transition-new 或 ::view-transition-old，或两者兼有。

::view-transition-image-pair 在 UA 样式表中默认具有以下样式

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-name-selector> 可以是以下值之一

*

使伪元素匹配所有视图过渡组。

root

使伪元素匹配用户代理创建的默认 root 视图过渡组，用于包含整个页面的视图过渡。此组包含任何未通过 view-transition-name 属性分配到其自身特定视图过渡组的元素。

<custom-ident>

使伪元素匹配通过将给定的 <custom-ident> 分配给元素（通过 view-transition-name 属性）创建的特定视图过渡组。

示例

css
::view-transition-image-pair(root) {
  isolation: auto;
}

规范

规范
CSS 视图过渡模块级别 1
# ::view-transition-image-pair

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅