1. Web
  2. CSS
  3. ::view-transition-group()

::view-transition-group()

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

::view-transition-group() CSS 偽元素表示單個檢視過渡快照組。

在檢視過渡期間，::view-transition-group() 包含在相關的偽元素樹中，如檢視過渡偽元素樹中所述。它始終是 ::view-transition 的子元素，並有一個 ::view-transition-image-pair() 作為子元素。

在 UA 樣式表中，::view-transition-group() 被賦予以下預設樣式：

css
:root::view-transition-group(*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}

預設情況下，選定元素最初映象代表“舊”檢視狀態的 ::view-transition-old() 偽元素的大小和位置，如果不存在“舊”檢視狀態，則映象代表“新”檢視狀態的 ::view-transition-new() 偽元素的大小和位置。

如果同時存在“舊”和“新”檢視狀態，檢視過渡樣式表中的樣式會將此偽元素的 width 和 height 從“舊”檢視狀態的邊框大小動畫到“新”檢視狀態的邊框大小。

注意：檢視過渡樣式在檢視過渡期間動態生成；有關更多詳細資訊，請參閱規範中的設定過渡偽元素和更新偽元素樣式部分。

此外，元素的變換從“舊”檢視狀態的螢幕空間變換動畫到新檢視狀態的螢幕空間變換。此樣式是動態生成的，因為動畫屬性的值是在過渡開始時確定的。

語法

css
::view-transition-group([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
  /* ... */
}

引數

*

通用選擇器 (*)；選擇頁面上的所有檢視過渡組。

根

應用於 :root 的 view-transition-name 使偽元素與預設的 root 檢視過渡組匹配。這是使用者代理建立的快照組，用於包含整個頁面的檢視過渡。此組包含任何未透過 view-transition-name 屬性分配給其自己的特定檢視過渡快照組的元素。

<pt-name-selector>

設定為 view-transition-name 屬性值的 <custom-ident>。

<pt-class-selector>

作為 view-transition-class 屬性值設定的 <custom-ident>，前面帶一個句點 (.)。

命名檢視過渡偽元素的 specificity 等於型別選擇器的特異性，除非使用的引數是通用選擇器，在這種情況下特異性為零。

示例

css
::view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}

::view-transition-group(.card) {
  animation-duration: 1s;
}

規範

規範
CSS 檢視過渡模組第 1 級
# ::view-transition-group

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者 在 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.