网页也能像 App 一样丝滑切场？浏览器在动画期间做了什么

你在商品列表点开一双鞋，缩略图平滑放大到详情页中央；返回时，它又像记得原位一样缩回列表。过去实现这种效果，开发者常要同时保存新旧页面、计算元素位置、处理动画和清理节点。稍有不慎，页面会闪烁，按钮还能在旧画面上被误点。

View Transition API 把一部分换景工作交给浏览器。它不是让整个网页真的飞来飞去，而是协调旧视图快照、新视图和覆盖在页面上方的动画层。

把网页切换想成舞台换景

舞台要从客厅换成森林，最难的不是把新布景搬上来，而是让观众看不到混乱过程。浏览器开始视图过渡时，会记录旧状态的视觉快照；应用完成内容更新后，浏览器捕获新状态，并在专门的过渡层中让旧图像淡出、新画面显现。

如果某个元素设置了 view-transition-name，浏览器可以把旧页面和新页面中的对应元素配对，分别计算位置与大小变化。观众看到商品图从列表飞到详情，底层可能只是旧快照与新元素之间的插值动画。

根据 MDN 的说明，这套机制既能处理单页应用内部的状态变化，也能用于多页面之间的导航。浏览器还提供代表旧视图、新视图和分组的伪元素，让开发者用 CSS 定制效果。

动画为什么能降低“等待感”

过渡不会让网络请求凭空加速，却能保持视觉连续性。用户看到同一张图片移动到新位置，会更容易理解“我刚才点的东西现在在哪里”，也不容易把页面切换误认为故障。MDN 将减少认知负担、保持上下文和降低感知延迟列为视图过渡的价值。

但动画只能改善感受，不能替代真实性能。若新页面要等十秒才出现，再华丽的转场也会变成拖延。合理做法是同时优化资源加载、响应速度和过渡设计。

快照不是免费午餐

大型页面快照和复杂滤镜会消耗内存与图形计算。大量元素各自参与过渡，还可能增加维护难度。设计时应优先挑真正帮助理解的关键元素，而不是让所有文字和按钮都旋转飞入。

动态内容也要小心。视频、光标、持续更新的图表在快照里可能短暂停住；固定定位元素若配对错误，会出现跳动。开发者需要在真实设备上测试，而不能只在高性能电脑里看一次演示。

“丝滑”必须允许用户拒绝

部分用户会因大幅缩放、旋转和视差动画感到眩晕。网页应尊重系统的 prefers-reduced-motion 设置，在用户偏好减少动态效果时缩短、简化或跳过动画。

视图更新后的焦点位置、阅读顺序和返回操作也必须正确。视觉上元素留在原处，不代表屏幕阅读器或键盘焦点自动理解了变化。过渡层负责画面，语义与无障碍仍是应用的责任。

好转场不是展示技术，而是解释变化

购物图片从缩略图进入详情、日历项目从列表展开为编辑面板，这些动画在说明对象之间的关系。相反，每次翻页都加入长时间淡入，往往只会拖慢操作。

View Transition API 的价值，是让网页开发者不必亲手搭建整套新旧画面管理机制，从而把注意力放回交互意图。浏览器终于像舞台监督一样帮忙换景，但一场好戏仍取决于：哪些变化值得被观众看见，哪些应该安静地瞬间完成。