视图转换动画 View Transitions API,纵享丝滑!

273天前1885

在移动端 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 的首页动画,哈哈,这次原生的支持势必会越来越丰富未来的页面交互效果。

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

* 若非特殊说明,本站文章均为博主原创,码字不易,如需转载,请注明出处!有疑问可留言交流,谢谢。

JavascriptCSS19 

视图转换动画 View Transitions API,纵享丝滑! - Jdeal | Life is like a Design.