• View Transitions Level 2 工作草案正式发布
  • 发布于 1周前
  • 51 热度
    0 评论
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 版本体验。
用户评论