view-transition-name

Limited availability

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

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

view-transition-name CSS 属性为选中的元素提供了一个独特的标识名称(一个 <custom-ident>),并使其参与与根视图过渡分开的视图过渡——或者如果指定了 none 值,则不参与任何视图过渡。

语法

css
/* <custom-ident> 值示例 */
view-transition-name: header;
view-transition-name: figure-caption;

/* 关键字值 */
view-transition-name: none;

<custom-ident>

一个独特的标识名称,使选中的元素参与与根视图过渡不同的视图过渡。标识符必须是唯一的。如果两个渲染元素在同一时间具有相同的 view-transition-nameViewTransition.ready 将被拒绝,过渡将被跳过。

none

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

形式定义

初始值none
适用元素所有元素
是否是继承属性
计算值as specified
动画类型离散值

形式语法

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

示例

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

规范

Specification
CSS View Transitions Module Level 1
# view-transition-name-prop

浏览器兼容性

BCD tables only load in the browser

参见