::view-transition-new

Limited availability

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

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

::view-transition-new CSS 伪元素表示视图过渡的新视图状态——即过渡后新视图的实时表示。

在视图过渡期间，::view-transition-new 包含在相关的伪元素树上，如视图过渡过程中所述。它只能是 ::view-transition-image-pair 的子节点，并且它不会有任何子节点。

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

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

css
@keyframes -ua-view-transition-fade-in {
  from {
    opacity: 0;
  }
}

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

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

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

语法

css
::view-transition-new(<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-new

浏览器兼容性

BCD tables only load in the browser

参见