view-transition-name

有限可用性

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

view-transition-name CSS 属性为选定元素提供一个独特的识别名称（一个 <custom-ident>），并使其参与一个独立于根视图过渡的 视图过渡——或者如果指定了 none 值，则不参与任何视图过渡。

语法

css
/* <custom-ident> value examples */
view-transition-name: header;
view-transition-name: figure-caption;

/* Keyword value */
view-transition-name: none;

值

<custom-ident>

一个识别名称，使选定元素参与一个独立于根视图过渡的 视图过渡。标识符必须是唯一的。如果两个渲染的元素在同一时间具有相同的 view-transition-name，ViewTransition.ready 将拒绝，并且过渡将被跳过。

注意：<custom-ident> 不能为 auto。

none

选定元素将不参与视图过渡。

正式定义

初始值none
应用于所有元素
继承否
计算值如指定
动画类型离散

正式语法

view-transition-name = 
  none            |
  <custom-ident>

示例

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

规范

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅