::view-transition-group

可用性有限

此功能不是基线功能，因为它在一些最广泛使用的浏览器中不起作用。

::view-transition-group CSS 伪元素 表示单个视图过渡快照组。

在视图过渡期间，::view-transition-group 包含在关联的伪元素树中，如视图过渡伪元素树中所述。它始终只是::view-transition的子元素，并且具有::view-transition-image-pair作为子元素。

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

css
html::view-transition-group(*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}

默认情况下，选定的元素最初会镜像表示“旧”视图状态的::view-transition-old伪元素的大小和位置，或者如果不存在“旧”视图状态，则镜像表示“新”视图状态的::view-transition-new伪元素的大小和位置。

如果同时存在“旧”和“新”视图状态，则视图过渡样式表中的样式会将此伪元素的width和height从“旧”视图状态的边框框大小动画到“新”视图状态的边框框大小。

注意：视图过渡样式是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范设置过渡伪元素和更新伪元素样式部分。

此外，元素的变换会从“旧”视图状态的屏幕空间变换动画到新视图状态的屏幕空间变换。此样式是动态生成的，因为动画属性的值是在过渡开始时确定的。

语法

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

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

*

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

root

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

<custom-ident>

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

示例

css
::view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅