::view-transition-image-old

CSS ::view-transition-image-old 伪元素是视图转换 API 的一部分，它允许我们选择视图转换中的“之前”快照。

::view-transition-image-old(*) {
  animation-duration: 700ms;
}

为了上下文，::view-transition-image-old 是浏览器在页面上注册视图转换时建立的伪元素树中的一个伪元素。::view-transition 伪元素是树的“根”，而 ::view-transition-image-pair 是两层深，包含在 ::view-transition-group 伪元素中。

而在 ::view-transition-image-pair 内，我们将找到 ::view-transition-image-old

::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-image-old 成为 ::view-transition-image-pair 的直接子元素。图像对还包含视图转换的“新”快照，::view-transition-image-new。

这两个伪元素分别代表了视图转换开始之前的“旧”状态和它转换到的“新”状态。因此，::view-transition-image-pair 成为选择和样式化这两个状态的便捷方式。

规范称之为伪 “视图转换旧状态图像”，这与它实际上是浏览器在转换运行之前捕获的视图转换的图像，然后转换到新状态相吻合。

语法

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

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

• <custom-ident>: 使用它在 ::view-transition 伪树中选择特定的转换“旧”图像。例如，如果特定元素的 view-transition-name 为 gallery，则使用 ::view-transition-image-old(gallery) 来选择该转换组。
• root: 此值匹配 :root::view-transition-old(*)，这是一个由浏览器设置的选择器，用于匹配任何未通过 CSS view-transition-name 属性分配给特定视图转换的视图转换“旧”图像。
• 通用选择器 (*): 使用它来选择页面上所有视图转换的“旧”状态。

默认样式

规范 定义了浏览器在 ::view-transition-image-old 上设置的默认样式，如下所示

:root::view-transition-old(*),
:root::view-transition-new(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

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

::view-transition-old(gallery) {
  animation-duration: 500ms;
}

规范

CSS ::view-transition-image-old 伪元素在 CSS 视图转换模块级别 1 规范中定义。该规范被标记为候选推荐快照，这意味着它已得到广泛审查，旨在成为正式的 W3C 推荐，但仍在野外进行测试。

规范进一步说明

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

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

浏览器支持