::view-transition-new
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
::view-transition-new
CSS 伪元素表示视图过渡的新视图状态——即过渡后新视图的实时表示。
在视图过渡期间,::view-transition-new
包含在相关的伪元素树上,如视图过渡过程中所述。它只能是 ::view-transition-image-pair
的子节点,并且它不会有任何子节点。
它是一个可替换元素,因此可以使用 object-fit
和 object-position
等属性进行操作。它的自然尺寸等于内容的大小。
::view-transition-new
在 UA 样式表中具有以下默认样式:
css
@keyframes -ua-view-transition-fade-in {
from {
opacity: 0;
}
}
html::view-transition-new(*) {
position: absolute;
inset-block-start: 0;
inline-size: 100%;
block-size: auto;
animation-name: -ua-view-transition-fade-in;
animation-duration: inherit;
animation-fill-mode: inherit;
}
语法
css
::view-transition-new(<pt-name-selector>) {
/* ... */
}
<pt-name-selector>
可以是以下任何值之一:
*
-
使伪元素选择器匹配所有视图过渡组。
root
-
使伪元素选择器匹配由 UA 创建的默认
root
视图过渡组,该组用于包含整个页面的视图过渡,这意味着任何未通过view-transition-name
属性分配给特定视图过渡组的元素。 <custom-ident>
-
使伪元素选择器匹配(通过
view-transition-name
属性将<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;
}
规范
Specification |
---|
CSS View Transitions Module Level 1 # ::view-transition-new |
浏览器兼容性
BCD tables only load in the browser