2024年03月28日，View Transitions Level 2 工作草案发布。该草案定义了视图转换 API 如何与跨文档导航协同工作。很快，开发者将不再需要把 MPA 重构为 SPA 才能使用视图转换功能。

该草案包括的主要内容有：
1.Cross-Document View Transitions
2.View Transition Types
3.View Transition Classes
4.Cross-Document View Transitions
如何让 MPA 进行视图转换是本规范的主要内容。作为前端开发者，你以前可能尝试过在 Chrome 浏览器中使用 meta tag 进行选择，但那只是暂时的。现在，您可以通过 CSS 来处理。要让两个同源文档选择跨文档视图转换，可以使用 @view-transition at-rule。

@view-transition {
  navigation: auto;
}

每当两个已选择加入的页面之间发生同源跨文档导航时，视图转换 API 就会自动捕捉新旧页面上带有 "view-transition-name"（视图转换名称）元素的快照。然后，快照对将使用 CSS 动画制作成动画。

为了实现自定义，Window 上还会触发两个新事件："pageswap" 和 "pagereveal"。这些事件并非视图转换 API 规范的一部分，但视图转换可以使用它们在快照拍摄前进行一些更改。在旧页面上，"pageswap" 会在最后一帧之前触发，而在新页面上，"pagereveal "会在第一次渲染机会之前触发。

View Transition Types
在某些页面上，您可以根据所采取的操作设置不同类型的视图转换。例如，重新排列项目与点击下一个/上一个链接时的快照元素应该不同。动画也很可能不同。

为了确保一种类型的声明不会干扰另一种类型，您可以在视图转换中添加一种类型，您的 CSS 可以使用 :active-view-transition-type(<type>) 选择器对该类型做出响应。

注意：在使用类型之前，您可以通过在 :root 上设置 className 或其他需要事后清理的内容来实现这一目的。有了视图转换类型后，您就不再需要这样做了，因为这些类型会在转换结束后自行移除。

View Transition Classes
假设你有一个页面，里面有一堆卡片，还有一个标题。要想将除标题外的所有卡片 VT 动画化，您必须编写一个针对每张卡片的选择器。

添加一张新卡？您还需要注入额外的 CSS，以便在视图转换中为新卡片制作动画。这非常麻烦，而且完全不可扩展。有了 view-transition-class，这就变得更容易了，因为你可以用这个类来装饰一系列元素。

.card {
  view-transition-class: card;
}
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce);
}

请注意，你仍然需要在每个元素上使用 view-transition-name，因为视图转换需要知道哪个元素对应的哪个元素。view-transition-class 可以让你精简 VT 动画代码。

感兴趣的同学，可以用 Chrome Canary 版本体验。