::view-transition-group
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
::view-transition-group
CSS 伪元素表示单个视图过渡组。
在视图过渡期间,::view-transition-group
包含在相关的伪元素树上,如视图过渡过程中所述。它只能是 ::view-transition
的子节点,并且有一个 ::view-transition-image-pair
子节点。
::view-transition-group
在 UA 样式表中具有以下默认样式:
html::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
从旧视图状态的边框盒大小动画到新视图状态的边框盒大小。
此外,元素的变换是从旧视图状态的屏幕空间,变换到新视图状态的屏幕空间。由于动画属性的值是在过渡开始时确定的,因此此样式是动态生成的。
语法
::view-transition-group(<pt-name-selector>) {
/* ... */
}
<pt-name-selector>
可以是以下任何值之一:
*
-
使伪元素选择器匹配所有视图过渡组。
root
-
使伪元素选择器匹配由 UA 创建的默认
root
视图过渡组,该组用于包含整个页面的视图过渡,这意味着任何未通过view-transition-name
属性分配给特定视图过渡组的元素。 <custom-ident>
-
使伪元素选择器匹配(通过
view-transition-name
属性将<custom-ident>
分配给元素而创建的)特定视图转换组。
示例
view-transition-group(embed-container) {
animation-duration: 0.3s;
animation-timing-function: ease;
z-index: 1;
}
规范
Specification |
---|
CSS View Transitions Module Level 1 # ::view-transition-group |
浏览器兼容性
BCD tables only load in the browser