::view-transition-image-pair

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

::view-transition-image-pair(root) {
  animation-duration: 1s;
}

为了说明，::view-transition-image-pair 是浏览器在页面上注册视图过渡时建立的伪元素树中的一个伪元素。::view-transition 伪元素是树的“根”，而 ::view-transition-image-pair 则位于树的第二层，包含在 ::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-image-pair 成为根 ::view-transition 的祖先，并且是 ::view-transition-group 的直接子元素。反过来，::view-transition-image-pair 包含两个它自己的子伪元素

• ::view-transition-old
• ::view-transition-new

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

规范称之为伪 “视图过渡图像对隔离”，这意味着它将 isolation 添加到视图过渡的旧状态和新状态。换句话说，::view-transition-image-pair 默认设置为 isolation: isloate。这建立了一个 堆叠上下文，允许视图过渡的旧状态和新状态位于其他所有内容之上，以防止它被其他元素遮挡。

语法

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

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

• <custom-ident>: 使用它在 ::view-transition 伪树中选择特定的过渡图像对。例如，如果某个特定元素的 view-transition-name 为 gallery，那么您将使用 ::view-transition-image-pair(gallery) 来选择该过渡组。
• root: 此值与 html::view-transition-image-pair(*) 相匹配，它是由浏览器设置的选择器，用于匹配任何未通过 CSS view-transition-name 属性分配给特定视图过渡的视图过渡图像对。
• 通用选择器 (*): 使用它来选择页面上的 所有 视图过渡图像对。

默认样式

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

:root::view-transition-image-pair(*) {
  position: absolute;
  inset: 0;

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

请注意，默认样式使用通用选择器 (*) 针对所有视图过渡。我们可以通过选择特定的 view-transition-name 来覆盖这些样式

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

规范

CSS ::view-transition-image-pair 伪元素在 CSS 视图过渡模块级别 1 规范中定义。规范被标记为候选推荐快照，这意味着它已经过广泛审查，旨在成为官方的 W3C 推荐，但仍在实际中进行测试。

规范进一步指出

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

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

浏览器支持

相关