在移动端 APP 中，经常会看到那种丝滑又舒适的页面切换动画，比如如下这样的：

软件里一般称之为共享元素（shareElement）动画，也就是动画前后有一个（或多个）相同的元素，起到前后过渡的效果，可以很清楚的看到元素的变化过程。

现在，web 中（Chrome 111+）也迎来了这样一个特性，叫做 View Transitions，简称“转场动画”，也能很轻松的实现这类效果。

整个 JS 部分只有一行核心代码，也就是 document.startViewTransition，来表示开始视图变换：

document.startViewTransition(() => {
  // 变化操作
});

有了原生的视图转换动画，可以很轻松的实现两种状态的过渡，让 web 也能实现 APP 的动画体验，简单解释下原理如下：

调用 document.startViewTransition，浏览器会捕捉当前页面的状态，类似于实时截图，或者“快照”；

执行实际的 dom 变化时，再次记录变化后的页面状态（截图）；

触发两者的过渡动画，包括透明度、位移等变化，当然也可以自定义 CSS 动画；

同时默认情况下是整个页面的淡入淡出变化；

如果需要指定具体元素的变化，可以给该元素指定 view-transition-name，前后变化不一定要同一元素，浏览器是根据 view-transition-name 寻找的，同一时间页面上不能出现两个相同 view-transition-name 的元素，不然视图变化会失效。

当然详细的使用方法及示例，大家可自行查看 View Transitions API 文档。

有 View Transitions API ，可以做到类似于如下的 APP 转场动画（多级页面间跳转）

我复现了此效果，目前在电脑端 Chrome 及 Edge 下表现良好，在移动端暂不支持，不过动画真的非常 nice。

其实很久前就一直想做网页之间的跳转动画了，尤其是喜欢 Appstore 的首页动画，哈哈，这次原生的支持势必会越来越丰富未来的页面交互效果。

当然，视图转换动画应该作为一种「体验增强」的功能，而非必要功能，哈哈。