::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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::view-transition-image-pair()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

参见