View Transitions API实战：SPA原生转场

发生了什么

据稀土掘金报道，Chrome 111落地的View Transitions API为SPA提供了浏览器原生的路由切换转场方案。该API通过document.startViewTransition方法，让开发者仅负责同步DOM更新，由浏览器处理截图、动画和合成。其核心机制是利用相同的view-transition-name匹配新旧树元素，实现“共享元素”飞入效果。文章指出，回调函数内应避免发请求以防页面卡顿，且name仅为瞬时匹配而非持久绑定。相比传统补丁方案，该API实现了关注点分离，维护收益显著。