::view-transition

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

::view-transition CSS 伪元素表示视图过渡叠加层的根元素,它包含所有视图过渡且位于所有其他页面内容的顶部。

在视图过渡期间,::view-transition 包含在相关的伪元素树中,如视图过渡过程中所述。它是该树的顶级节点,并且有一个或多个 ::view-transition-group 子节点。

::view-transition 在 UA 样式表中具有以下默认样式:

css
html::view-transition {
  position: fixed;
  inset: 0;
}

所有 ::view-transition-group 伪元素都相对于视图过渡根元素定位。

语法

css
::view-transition {
  /* ... */
}

示例

css
::view-transition {
  background-color: rgba(0, 0, 0, 0.25);
}

规范

Specification
CSS View Transitions Module Level 1
# selectordef-view-transition

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::view-transition

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

参见