View Transitions API 是一类较新的 web API, 为 DOM 更新提供了更加便利的过渡机制, 目前, chrome 111 + 已经支持该 API.
传统的过渡动画有什么缺点呢?
最大的缺点就是交叠(overlap).
老旧 DOM 的状态会同时出现在页面, 造成一些列麻烦. 例如过渡的过程中, 出现了滚动条, 页面产生抖动等. 我们往往需要额外写一些 css 来处理交叠 阶段的麻烦. 同时, 交叠还造成了一些无障碍访问的问题.
但 View Transitions API 走了另一条道路. 它利用快照 snapshot 技术, 在 DOM 状态更新的过程中, 不会有交叠状态出现.
其使用形式如下:
document.startViewTransition(() => 触发DOM状态变动的代码);
调用 startViewTransition()时, 浏览器会先记录一张快照, 然后执行触发DOM状态变动的代码.
执行完毕后, 浏览器再次捕捉一张快照.
有了两个快照, 浏览器会在页面最上层, 构建一个类似下面结构的伪元素树:
:: view-transition
└─ :: view-transition-group(root)
└─ :: view-transition-image-pair(root)
├─ :: view-transition-old(root)
└─ :: view-transition-new(root)
只用去控制这个伪元素树,即可实现过渡动画效果.
也可以支持异步
document.startViewTransition(async () => {
await something;
await updateTheDOMSomehow();
await somethingElse;
});
所有 promise fulfill 之后, 才会开始过渡.
注意: 这里页面将会失去交互能力,所以应当尽量减少延时, 网络 fetch 请求要在调用 startViewTransition 之前完成.
默认过渡类型是: cross-fade.
可以用下述方式,取消默认的过渡动画.
::view-transition-old(root),
::view-transition-new(root) {
/* Prevent the default animation,
so both views remain opacity:1 throughout the transition */
animation: none;
/* Use normal blending,
so the new view sits on top and obscures the old view */
mix-blend-mode: normal;
}
有些动画是跟点击事件关联的, 所以需要引入js代码. 这里可以利用 transition.ready 和 Web 动画API 来实现.
当伪元素树构建完成之后, transition.ready就能执行回调函数了.
