1. Web
  2. CSS
  3. ::view-transition-group()

::view-transition-group()

可用性有限

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

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

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

在 UA 样式表中，::view-transition-group() 被赋予以下默认样式：

css
:root::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-class-selector>? ] | <pt-class-selector>) {
  /* ... */
}

参数

*

通用选择器 (*)；选择页面上的所有视图过渡组。

根

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

<pt-name-selector>

设置为 view-transition-name 属性值的 <custom-ident>。

<pt-class-selector>

作为 view-transition-class 属性值设置的 <custom-ident>，前面带一个句点 (.)。

命名视图过渡伪元素的 specificity 等于类型选择器的特异性，除非使用的参数是通用选择器，在这种情况下特异性为零。

示例

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

::view-transition-group(.card) {
  animation-duration: 1s;
}

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.