view-transition-class

语法

/* <custom-ident> value examples */
view-transition-class: card;

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

/* Global values */
view-transition-class: inherit;
view-transition-class: initial;
view-transition-class: revert;
view-transition-class: revert-layer;
view-transition-class: unset;

值

<custom-ident>

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

none

没有类会应用于为此元素生成的命名视图过渡伪元素。

描述

view-transition-class 值提供了一个样式钩子，类似于 CSS 类名，可用于将相同的样式应用于多个视图过渡伪元素。它不标记元素进行捕获。每个单独的元素仍然需要自己唯一的 view-transition-name；view-transition-class 仅用作已经具有 view-transition-name 的元素的额外样式方式。在 CSS View Transitions Module Level 2 规范中正在讨论自动确定 view-transition-name 的支持。

view-transition-class 使用视图过渡伪元素应用样式，包括 ::view-transition-group()、::view-transition-image-pair()、::view-transition-old() 和 ::view-transition-new()。这与 view-transition-name 不同，后者匹配旧状态中的元素与其在新状态中相应元素之间的视图过渡。

在所有支持视图过渡的浏览器完全支持 view-transition-class 属性之前，请为每个元素包含一个自定义的 ::view-transition-group()。

正式定义

正式语法

view-transition-class = 
  none             |
  <custom-ident>+  

示例

::view-transition-group(.fast-card-slide) {
  animation-duration: 3s;
}

.product {
  view-transition-class: fast-card-slide;
}

.product#card1 {
  view-transition-name: show-card;
}

.product#card2 {
  view-transition-name: hide-card;
}

规范

浏览器兼容性

另见

• view-transition-name
• 使用视图过渡 API 指南
• View Transition API
• 使用视图过渡 API 实现平滑过渡