::view-transition-new()
::view-transition-new() CSS 偽元素表示檢視轉換的“新”檢視狀態——轉換後的即時狀態快照。
在檢視轉換期間，::view-transition-new() 包含在相關的偽元素樹中，如檢視轉換偽元素樹中所述。它只可能是 ::view-transition-image-pair() 的子元素，並且永遠不會有任何子元素。
它是一個替換元素，因此可以使用 object-fit 和 object-position 等屬性進行操作。它的固有尺寸等於內容的尺寸。
使用者代理樣式表中包含以下預設樣式
css
:root::view-transition-old(*),
:root::view-transition-new(*) {
position: absolute;
inset-block-start: 0;
inline-size: 100%;
block-size: auto;
animation-duration: inherit;
animation-fill-mode: inherit;
animation-delay: inherit;
}
/* Keyframes for blending when there are 2 images */
@keyframes -ua-mix-blend-mode-plus-lighter {
from {
mix-blend-mode: plus-lighter;
}
to {
mix-blend-mode: plus-lighter;
}
}
@keyframes -ua-view-transition-fade-in {
from {
opacity: 0;
}
}
語法
css
::view-transition-new([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
/* ... */
}
引數
*-
通用選擇器 (
*)；選擇頁面上的所有檢視過渡組。 根-
使偽元素匹配使用者代理建立的預設
root檢視過渡快照組，該組用於包含整個頁面的檢視過渡。此組包含任何未透過view-transition-name屬性分配到其自己的特定檢視過渡快照組的元素。 <pt-name-selector>-
設定為
view-transition-name屬性值的<custom-ident>。 <pt-class-selector>-
設定為
view-transition-class屬性值並前面帶有句點（.）的<custom-ident>。
示例
css
figcaption {
view-transition-name: figure-caption;
}
@keyframes grow-x {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes shrink-x {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
height: auto;
right: 0;
left: auto;
transform-origin: right center;
}
::view-transition-old(figure-caption) {
animation: 0.25s linear both shrink-x;
}
::view-transition-new(figure-caption) {
animation: 0.25s 0.25s linear both grow-x;
}
規範
| 規範 |
|---|
| CSS 檢視過渡模組第 1 級 # ::view-transition-new |
瀏覽器相容性
載入中…