::view-transition-group

::view-transition-group 伪元素选择一个或多个容器，这些容器将单个视图过渡的各个部分分组在一起。

::view-transition-group(transition-name) {
  animation-timing-function: ease-in-out;
}

看到伪元素参数中的 transition-name 标识符了吗？这就是我们如何选择特定视图过渡的方式。视图过渡在一个 ::view-transition 伪元素中分组，其中每个过渡都包含在一个 ::view-transition-group 中。

::view-transition
├─ ::view-transition-group(name-1)
├─ ::view-transition-group(name-2)
│ /* and so one... */

每个 ::view-transition-group 内部都有另一个伪元素，其中包含视图过渡之间的“前后”快照。

::view-transition
├─ ::view-transition-group(name-1)
│  └─ ::view-transition-image-pair(name-1)
│     ├─ ::view-transition-old(name-1)
│     └─ ::view-transition-new(name-1)
├─ ::view-transition-group(name-2)
│  └─ ::view-transition-image-pair(name-2)
│     ├─ ::view-transition-old(name-2)
│     └─ ::view-transition-new(name-2)
│ /* and so one... */

这实际上使 ::view-transition-group 成为单个视图过渡的“根”元素。它是用于选择 :view-transition-image-pair 的包装器，通常用于定位特定视图过渡或定义其动画属性。实际上，规范将其称为“视图过渡命名子树根”。

语法

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

伪元素在其参数中接受一个 <pt-name-selector>，它等于以下之一

• <custom-ident>: 使用它在 ::view-transition 伪树中选择特定的过渡组。例如，如果特定元素具有 view-transition-name 为 gallery，则您将使用 ::view-transition-group(gallery) 来选择该过渡组。
• root: 此值匹配 html::view-transition-group(*)，它是由浏览器设置的选择器（参见下面的 “默认样式”），用于匹配未通过 CSS view-transition-name 属性分配给特定视图过渡组的任何视图过渡。
• 通用选择器 (*): 使用它选择页面上的所有视图过渡组。

默认样式

与许多语义 HTML 元素和伪元素一样，浏览器会对 ::view-transition-group 应用一组默认样式。

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

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

因此，如果我们想定位和配置过渡的动画行为，这些是我们必须在自己的样式表中覆盖的样式。

可访问性

在使用动画和过渡时，始终考虑具有运动敏感性的用户是一个好主意。我们可以使用 ::view-transition-group 来减少使用 prefers-reduced-motion 媒体查询的运动量。

根据我们上面了解到的默认样式，浏览器会应用 animation-duration 为 0.25s。我们可以通过在伪元素参数中传递通用选择器来选择页面上的所有视图过渡组，并通过删除或减少该持续时间来适应运动敏感性。

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*): {
    animation-duration: 0;
  }
}

规范

::view-transition-group 伪元素在 视图过渡模块级别 1 规范中定义。它被标记为候选推荐快照，这意味着它已得到广泛审查并打算成为正式的 W3C 推荐，但它仍在现实环境中进行测试。

规范进一步说明

本文档旨在成为 W3C 推荐；它将至少在 2023 年 12 月 5 日 之前保持候选推荐状态，以收集更多反馈。

截至撰写本文时，该日期已过，因此请关注该文档的状态，因为它将成为推荐的功能。

浏览器支持

如果您需要支持不支持 ::view-transition 的旧版浏览器，请尝试使用 @supports 来检查浏览器是否识别 view-transition-name 属性

/* Apply these styles only if View Transitions are *NOT* supported */
@supports not (view-transition-name: none) {
  /* Fallback Styles */
}

更多信息

相关