View Transition API
视图过渡 API 提供了一种机制，可以轻松地在不同的网站视图之间创建动画过渡。这包括在单页应用 (SPA) 的 DOM 状态之间进行动画，以及在多页应用 (MPA) 的文档导航之间进行动画。
概念与用法
视图过渡是一种流行的设计选择，可以减少用户的认知负担，帮助他们保持上下文，并在应用程序状态或视图之间移动时减少感知到的加载延迟。
然而，在 Web 上创建视图过渡历史上一直很困难
- 单页应用 (SPA) 中状态之间的过渡通常需要编写大量的 CSS 和 JavaScript 来
- 处理旧内容和新内容的加载和定位。
- 对旧状态和新状态进行动画以创建过渡。
- 阻止用户意外与旧内容交互导致问题。
- 在过渡完成后移除旧内容。当新旧内容同时存在于 DOM 中时，还可能导致可访问性问题，例如阅读位置丢失、焦点混乱以及奇怪的实时区域声明行为。
- 跨文档视图过渡（即，在 MPA 中不同页面之间的导航）历史上是不可能的。
视图过渡 API 提供了一种简单的方法来处理上述两种用例所需的视图更改和过渡动画。
创建使用浏览器默认过渡动画的视图过渡非常快捷，并且有功能允许您自定义过渡动画和操作视图过渡本身（例如指定跳过动画的条件），这适用于 SPA 和 MPA 视图过渡。
有关更多信息，请参阅 使用视图过渡 API。
接口
ViewTransition-
表示一个视图过渡，并提供功能来响应过渡到达不同状态（例如，准备运行动画，或动画已完成）或完全跳过过渡。
其他接口的扩展
Document.startViewTransition()-
启动一个新的同文档 (SPA) 视图过渡，并返回一个
ViewTransition对象来表示它。 PageRevealEvent-
pagereveal事件的事件对象。在跨文档导航期间，如果视图过渡是由导航触发的，它允许您从导航到的文档中操作相关的视图过渡（提供对相关ViewTransition对象的访问）。 PageSwapEvent-
pageswap事件的事件对象。在跨文档导航期间，如果视图过渡是由导航触发的，它允许您从导航前的文档操作相关的视图过渡（提供对相关ViewTransition对象的访问）。它还提供对导航类型、当前和目标文档历史记录条目的信息访问。 Window的pagereveal事件Window的pageswap事件-
当文档因导航即将卸载时触发。
HTML 新增功能
<link rel="expect">-
标识与关联文档中最关键的内容，供用户首次查看页面。文档渲染将被阻止，直到关键内容被解析，从而确保所有支持的浏览器都有一个一致的首次绘制 — 因此，也有一个一致的视图过渡。
CSS 新增功能
@ 规则
@view-transition-
对于跨文档导航，
@view-transition用于让当前和目标文档选择加入视图过渡。
属性
view-transition-name-
指定视图过渡快照中选定元素将参与其中，这使得元素在视图过渡期间可以与页面其余部分分开进行动画。
view-transition-class-
为具有
view-transition-name的选定元素提供了一种额外的样式设置方法。
伪类
:active-view-transition-
在视图过渡进行时匹配元素。
:active-view-transition-type()-
在特定类型视图过渡进行时匹配元素。
伪元素
::view-transition-
视图过渡覆盖的根，其中包含所有视图过渡，并位于所有其他页面内容之上。
::view-transition-group()-
单个视图过渡的根。
::view-transition-image-pair()-
视图过渡的旧视图和新视图的容器 — 过渡之前和之后。
::view-transition-old()-
过渡前的旧视图的静态快照。
::view-transition-new()-
过渡后的新视图的实时表示。
示例
- 基本视图过渡 SPA 演示：一个带有视图过渡的基本图片库演示，具有旧图像和新图像、旧字幕和新字幕之间的独立动画。
- 基本视图过渡 MPA 演示：一个演示跨文档 (MPA) 视图过渡用法的示例两页网站，在两个页面导航之间提供自定义的“向上滑动”过渡。
- 视图过渡
match-element演示：一个带有动画列表项的 SPA，演示了如何使用view-transition-name属性的match-element值来为单个元素设置动画。 - HTTP 203 播放列表：一个视频播放器演示应用，其中包含多个不同的 SPA 视图过渡，其中许多都在 使用视图过渡 API 实现流畅的过渡 中进行了说明。
- Chrome DevRel 视图过渡演示：一系列视图过渡 API 演示。
规范
| 规范 |
|---|
| CSS 视图过渡模块第 1 级 |
浏览器兼容性
api.Document.startViewTransition
加载中…
css.at-rules.view-transition
加载中…
另见
- developer.chrome.com 上的 使用视图过渡 API 实现流畅的过渡 (2024)
- stackdiary.com 上的 视图过渡 API：创建流畅的页面过渡 (2023)
- DebugBear 上的 视图过渡 API：无需框架的单页应用 (2024)