::view-transition-image-new

CSS ::view-transition-image-new 伪元素是视图过渡 API 的一部分，它使我们能够选择在视图过渡中过渡到的“新”快照。

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

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

在 ::view-transition-image-pair 内部，我们将找到 ::view-transition-image-new

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

这两个伪元素分别表示视图过渡开始之前的“旧”状态和过渡到的“新”状态。因此，::view-transition-image-pair 成为选择和共同设置这两种状态的便捷方式。

规范将此称为伪 “视图过渡新状态图像”，考虑到它确实是浏览器在过渡运行之前捕获的视图过渡的图像，然后过渡到新状态，因此非常贴切。

语法

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

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

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

默认样式

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

: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-name 来覆盖这些样式

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

规范

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

该规范进一步说明

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

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

浏览器支持

相关