::view-transition-image-pair

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

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

在视图过渡期间，::view-transition-image-pair 包含在相关的伪元素树上，如视图过渡过程中所述。它只能是 ::view-transition-group 的子节点。并且可以有一个 ::view-transition-new 或一个 ::view-transition-old 子节点，亦或是两者都有。

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

css
html::view-transition-image-pair(*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
}

默认情况下，::view-transition-image-pair 在视图过渡样式表中设置了 isolation: isolate，以便其子元素可以使用非正常混合模式进行混合，而不会影响其他视觉输出。

语法

css
::view-transition-image-pair(<pt-name-selector>) {
  /* ... */
}

<pt-name-selector> 可以是以下任何值之一：

*

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

root

使伪元素选择器匹配由 UA 创建的默认 root 视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过 view-transition-name 属性分配给特定视图过渡组的元素。

<custom-ident>

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

示例

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

规范

Specification
CSS View Transitions Module Level 1
# ::view-transition-image-pair

浏览器兼容性

BCD tables only load in the browser

参见