DigitalOcean 为您的旅程每个阶段提供云产品。 立即开始使用 $200 免费积分！
CSS 的 ::view-transition 伪元素是顶级 - 或“根” - 包含页面上定义为 CSS 视图过渡的所有动画过渡。
::view-transition {
position: fixed;
inset: 0;
}语法
::view-transition {
/* Styles */
}值得注意的是，::view-transition 包含页面上的所有视图过渡（我们将在稍后讨论这一点），因此您很可能看到它最常使用的是未连接到选择器，例如上面的示例，而不是以下示例
/* 👎 */
blockquote::view-transition {
/* Styles */
}保持原样，::view-transition 的作用域限定为 <html> 元素
html::view-transition {
/* Styles */
}默认样式
与许多语义 HTML 元素和伪元素一样，浏览器会对 ::view-transition 应用一组默认样式。
::view-transition {
position: fixed;
inset: 0;
}因此，如果我们想自己定位 ::view-transition，这些是我们在自己的样式表中必须 覆盖 的样式。
它是一个“树状遵循”伪元素
换句话说，它实际上是一个包装器，充当其下方其他伪元素的父伪元素。规范称之为 “树状遵循伪元素”，这意味着它包含其他伪元素，这些伪元素可用于直接在 CSS 中设置视图过渡的样式。
在这种情况下，::view-transition 包含页面上的所有视图过渡，并按组进行组织。
::view-transition
├─ ::view-transition-group(name)
│ └─ ::view-transition-image-pair(name)
│ ├─ ::view-transition-old(name)
│ └─ ::view-transition-new(name)
├─ ::view-transition-group(name)
│ └─ ::view-transition-image-pair(name)
│ ├─ ::view-transition-old(name)
│ └─ ::view-transition-new(name)
│ /* and so one... */
这样，我们可以使用 ::view-transition 定义适用于所有视图过渡的样式，并使用 ::view-transition-group 定义适用于各个视图过渡的样式。
它如何融入视图过渡过程
熟悉视图过渡的步骤是一个好主意，以便了解此 ::view-transition 树如何在所有内容中适应。
- 视图过渡是在 JavaScript 中使用
document.startViewTransition()激活的。 - 我们将传递给
startViewTransition的任何过渡都会被触发以开始在视图之间过渡。 - 浏览器会拍摄要过渡到的新视图状态的图片或快照。
- 建立
::view-transition树，定义过渡中使用的样式。 - 旧视图淡出，而新视图淡入。
- 一旦 JavaScript 中的
ViewTransition.finishedpromise 完成，过渡就会结束。
这正是我们在步骤 4 中谈论的内容。
它引入了新的堆叠层！
您知道我们如何使用 CSS 的 z-index 属性将元素一层一层地叠加起来，就像在三维空间中一样吗？
我们称之为“堆叠上下文”，它发生在我们在元素上声明 position 时。在本例中，两个 .child 元素都处于堆叠上下文中，我们使用 z-index 来确定堆叠中哪个元素位于另一个元素之上。CSS 使用此信息来 确定它以何种顺序应用样式
- 具有负堆叠级别的元素，通常是具有
z-index: -1的元素 - 具有
position值为static的元素。 - 具有堆叠级别为
0的元素，通常是定位元素，其z-index值为auto。 - 具有正堆叠级别的元素，例如，定位元素，其
z-index值为1或更高。
第三层称为“顶层”，因为它正好位于正负层之间。<html> 和 <body> 就位于此处。
事实证明，::view-transition 引入了自己的新的堆叠层，该层应用于所有其他内容之后，即，它位于具有最高编号的层之后
- 具有负堆叠级别的元素，通常是具有
z-index: -1的元素 - 具有
position值为static的元素。 - 具有堆叠级别为
0的元素，通常是定位元素，其z-index值为auto。 - 具有正堆叠级别的元素，例如，定位元素，其
z-index值为1或更高。 - 视图过渡
以下是规范的描述方式
The
CSS 视图过渡模块级别 1，4.2. 视图过渡绘画顺序::view-transitionpseudo-element generates a new stacking context, called the view transition layer, which paints after all other content of the document (including any content rendered in the top layer), after any filters and effects that are applied to such content. (It is not subject to such filters or effects, except insofar as they affect the rendered contents of the ::view-transition-old() and ::view-transition-new() pseudo-elements.)
您可能会问，有什么大不了的？这意味着视图过渡的样式绘制在所有其他内容之后，确保它们永远不会被其他层掩盖。这样，我们就不必在视图过渡样式和页面上元素的样式之间使用 z-index 来回切换，以确保它们可见。但这只有在 (1) 页面上有视图过渡并且 (2) 视图过渡正在运行时才会生效。过渡结束后，其堆叠上下文就会消失。
规范
CSS 的 ::view-transition 伪元素在 视图过渡模块级别 1 规范中定义。它被标记为候选推荐快照，这意味着它已经过广泛审查，并且旨在成为正式的 W3C 推荐，但仍在野外进行测试。
规范进一步说明
This document is intended to become a W3C Recommendation; it will remain a Candidate Recommendation at least until 5 December 2023 to gather additional feedback.
截至撰写本文时，该日期已过，因此请密切关注文档的状态，因为它正在成为推荐功能。
浏览器支持
如果您需要支持不支持 ::view-transition 的旧版浏览器，请尝试使用 @supports 检查浏览器是否识别 view-transition-name 属性
/* Apply these styles only if View Transitions are *NOT* supported */
@supports not (view-transition-name: none) {
/* Fallback Styles */
}