::view-transition-old

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

::view-transition-old CSS 伪元素表示视图过渡的旧视图状态——即过渡前旧视图的静态屏幕截图。

在视图过渡期间,::view-transition-old 包含在相关的伪元素树上,如视图过渡过程中所述,前提是有一个旧视图状态需要表示。它只能是 ::view-transition-image-pair 的子节点,并且它不会有任何子节点。

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

::view-transition-old 在 UA 样式表中具有以下默认样式:

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

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

  animation-name: -ua-view-transition-fade-out;
  animation-duration: inherit;
  animation-fill-mode: inherit;
}

备注: 视图过渡样式表也会额外设置一些样式来动画化 ::view-transition-old。这些样式是在视图过渡期间动态生成的;有关更多详细信息,请参阅规范中的设置过渡伪元素更新伪元素样式部分。

语法

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

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

*

使伪元素选择器匹配所有视图过渡组。

root

使伪元素选择器匹配由 UA 创建的默认 root 视图过渡组,该组用于包含整个页面的视图过渡,这意味着任何未通过 view-transition-name 属性分配给特定视图过渡组的元素。

<custom-ident>

使伪元素选择器匹配(通过 view-transition-name 属性将 <custom-ident> 分配给元素而创建的)特定视图转换组。

示例

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

规范

Specification
CSS View Transitions Module Level 1
# ::view-transition-old

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::view-transition-old()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

参见