view-transition-name
Baseline
2025
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or 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-name，ViewTransition.ready将被拒绝，过渡将被跳过。备注：
<custom-ident>不能是auto。 none-
所选元素将不参与视图过渡。
形式定义
形式语法
view-transition-name =
none |
<custom-ident>
示例
css
figcaption {
view-transition-name: figure-caption;
}
规范
| Specification |
|---|
| CSS View Transitions Module Level 1 # view-transition-name-prop |
浏览器兼容性
Loading…