Chrome 111开始支持单页应用程序视图切换

Google将在Chrome 111支持View Transition API这项实验性技术,View Transition API将让开发者可以简单更新DOM,在不同DOM状态之间产生动画转换,还能进一步改变DOM的内容,简化单页应用程序切换画面的开发工作。

视图切换(View Transition)是一个流行设计方式,通过保留浏览画面中的上下文,仅更新部分内容,有助于减少用户的认知负荷,并且减少应用程序状态或是画面切换时,所造成的加载延迟。根据MDN网页文件的资料,要在网页上进行画面转换向来困难,在单页应用程序(SPA)中的状态切换,需要编写许多复杂的CSS和JavaScript程序代码。

需要处理的部分包括新旧内容的加载和定位,还要创建动画来从旧状态过渡到新状态,并处理当用户意外点按到旧内容所可能导致的问题,最后在画面切换完成后移除旧内容。另外,将新旧内容呈现在同一个位置,还需要处理阅读位置遗失或焦点混乱等问题,而View Transition API向开发者提供一个处理DOM变更和动画过渡的简单方法。

在浏览器的支持上,主要浏览器中现在仅有Chrome 111支持,Edge则还在开发中端段,Firefox和Safari则尚未支持。Google提到,他们还会扩展View Transition API的支持,使功能更加完整。不过目前Chrome Canary中View Transition API暂时故障,想要试用该API的开发者,需要选择Chrome 111稳定版或是Chrome 112测试版。