::view-transition-old

有限可用性

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

**::view-transition-old** CSS 伪元素 代表视图过渡的“旧”视图状态——过渡之前旧视图的静态快照。

在视图过渡期间，::view-transition-old 将包含在关联的伪元素树中，如 视图过渡伪元素树 中所述，前提是有“旧”视图状态要表示。它始终只是 ::view-transition-image-pair 的子元素，并且从未有任何子元素。

它是一个替换元素，因此可以使用 object-fit 和 object-position 等属性进行操作。它具有等于内容大小的自然尺寸。

以下默认样式包含在 UA 样式表中

css
: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;
}

/* Keyframes for blending when there are 2 images */
@keyframes -ua-mix-blend-mode-plus-lighter {
  from {
    mix-blend-mode: plus-lighter;
  }
  to {
    mix-blend-mode: plus-lighter;
  }
}

@keyframes -ua-view-transition-fade-out {
  to {
    opacity: 0;
  }
}

注意：还设置了其他视图过渡样式来为 ::view-transition-old 设置动画。这些是在视图过渡期间动态生成的；有关更多详细信息，请参阅规范的 设置过渡伪元素 和 更新伪元素样式 部分。

语法

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

<pt-name-selector> 可以是以下值之一

*

导致伪元素匹配所有视图过渡组。

root

导致伪元素匹配用户代理为整个页面创建的默认 root 视图过渡快照组，其中包含该视图过渡。此组包含任何未通过 view-transition-name 属性分配到其自身特定视图过渡快照组的元素。

<custom-ident>

导致伪元素匹配特定视图过渡快照组，该组通过将给定的 <custom-ident> 分配给元素通过 view-transition-name 属性创建。

示例

css
figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}

规范

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

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅