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 實現平滑過渡