视图转换 API

视图转换是减少用户认知负荷、帮助用户保持上下文以及在用户在应用程序的不同状态或视图之间移动时减少感知加载延迟的流行设计选择。

但是，在 Web 上创建视图转换在历史上一直很困难

• 单页应用程序 (SPA) 中状态之间的转换往往需要编写大量的 CSS 和 JavaScript 来
  • 处理旧内容和新内容的加载和定位。
  • 对旧状态和新状态进行动画处理以创建转换。
  • 阻止意外用户与旧内容的交互导致问题。
  • 在转换完成后删除旧内容。无障碍问题（例如阅读位置丢失、焦点混乱以及奇怪的实时区域公告行为）也可能因新旧内容同时出现在 DOM 中而导致。
• 跨文档视图转换（即 MPA 中不同页面之间的导航）在历史上是不可能的。

视图转换 API 为以上两种用例提供了处理所需视图更改和转换动画的简便方法。

创建使用浏览器默认转换动画的视图转换非常快，并且有一些功能允许您自定义转换动画并操作视图转换本身（例如指定跳过动画的条件），适用于 SPA 和 MPA 视图转换。

有关更多信息，请参阅 使用视图转换 API。

ViewTransition

表示视图转换，并提供功能以响应转换到达不同状态（例如准备好运行动画或动画完成）或完全跳过转换。

Document.startViewTransition()

启动新的同一文档 (SPA) 视图转换，并返回一个 ViewTransition 对象来表示它。

PageRevealEvent

用于 pagereveal 事件的事件对象。在跨文档导航期间，它允许您从要导航到的文档中操作相关视图转换（提供对相关 ViewTransition 对象的访问），如果视图转换是由导航触发的。

PageSwapEvent

用于 pageswap 事件的事件对象。在跨文档导航期间，它允许您从要导航到的文档中操作相关视图转换（提供对相关 ViewTransition 对象的访问），如果视图转换是由导航触发的。它还提供对导航类型和当前以及目标文档历史记录条目的信息的访问。

The Window pagereveal 事件

在首次呈现文档时触发，无论是从网络加载新文档还是激活文档（无论是来自 后退/前进缓存 (bfcache) 还是 预渲染）。

The Window pageswap 事件

在由于导航即将卸载文档时触发。

<link rel="expect">

标识与用户对页面的初始视图相关的文档中最关键的内容。文档呈现将被阻止，直到关键内容被解析，以确保在所有支持的浏览器中一致的第一次绘制 - 因此，视图转换。

@view-transition

在跨文档导航的情况下，@view-transition 用于选择当前和目标文档以进行视图转换。

view-transition-name

为选定元素提供单独的标识名称，并使其参与与根视图转换不同的视图转换 - 如果指定 none 值，则不进行任何视图转换。

::view-transition

视图转换叠加的根，它包含所有视图转换，并位于所有其他页面内容之上。

::view-transition-group()

单个视图转换的根。

::view-transition-image-pair()

视图转换的旧视图和新视图的容器 - 在转换之前和之后。

::view-transition-old()

转换前的旧视图的静态快照。

::view-transition-new()

转换后的新视图的实时表示。

• 基本视图转换 SPA 演示：带有视图转换的基本图像库演示，在旧图像和新图像以及旧标题和新标题之间提供单独的动画。
• 基本视图转换 MPA 演示：一个示例两页网站，演示跨文档 (MPA) 视图转换的使用，在两个页面之间导航时提供自定义的“向上滑动”转换。
• HTTP 203 播放列表：一个视频播放器演示应用程序，它具有几个不同的 SPA 视图转换，其中许多在 使用视图转换 API 进行平滑简易转换 中有解释。
• Chrome DevRel 团队成员列表：一个基本的团队个人资料页面应用程序，演示了如何使用 pagereveal 和 pageswap 事件根据“from”和“to”URL 自定义跨文档视图转换的出站和入站动画。

• 使用视图转换 API 进行平滑简易转换
• 视图转换 API：创建平滑的页面转换