配了八年 MPA，每次跳转都像在撕纸——今天 Safari 把这件事彻底变了

你点一个链接，页面直接「啪」地一下切走。没有过渡，没有留白，浏览器像换了张纸一样重新画了整个画面。这是 MPA（多页应用）的默认命运，也是为什么那么多项目在根本没用到 SPA 复杂功能的情况下，还是上了 React 或 Vue——就是为了那个页面切换动画。

今天这件事变了。Safari 18.2 正式支持了跨文档 View Transitions，Chrome 和 Edge 从 126 就有了，Firefox 还在 flag 后面。这意味着三大家浏览器里有两个已经能用，一行 CSS 就能让 MPA 的页面跳转拥有和 SPA 一样的丝滑过渡，而且根本不需要任何 JavaScript 路由。

三年前你要做一个带过渡动画的页面切换，只有两条路：要么把整个项目改成 SPA，让前端接管路由；要么装一个框架的过渡动画库，然后在每个页面组件里手动配置。这两种方案都附带了一堆你本来不需要的东西：状态管理、虚拟 DOM、 hydration 策略。

现在只要两页都加一行 CSS，浏览器自己会搞定剩下的事情：

@view-transition {
  navigation: auto;
}

点击链接，浏览器自动截取旧页面的快照，截取新页面的快照，然后用 CSS 动画在两张「纸」之间做过渡。默认是淡入淡出，几十行 CSS 就能换成滑动、缩放或者更有创意的效果。

举几个实际场景：

轮播图跳转——从缩略图列表页进详情页，图片不需要重新加载，直接在两张快照之间做位移和缩放动画。用户看到的是图片从原来的位置「滑」到了新页面里。

个人主页导航——头像、用户名、文章列表，每个区块独立命名，浏览器会把每个区块分别做过渡动画，而不是整个页面一起淡入淡出。

卡片放大镜——点击产品卡片，整个卡片放大成详情页的一部分，背景内容做模糊处理。这在以前只能靠 SPA 的状态管理来做，现在 CSS 能原生描述这个关系。

核心机制没有很多人想象的那么复杂。浏览器在导航发生时做四件事：截取旧页面快照、导航到新页面、截取新页面快照、用 CSS 动画把两张快照之间的变化「演」出来。动画本身是 GPU 加速的合成器线程操作，不触发主线程布局，所以 60fps 的代价极低。

有一点必须说清楚：这个功能是渐进增强的。浏览器不支持就直接当这行 CSS 不存在，页面走正常导航，不会报错也不会白屏。所以实际上你可以现在就发给生产环境，不支持的浏览器完全不受影响。

但有一件事是强制的：无障碍处理。所有自定义动画都应该包在媒体查询里：

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

这样选择关闭动画的用户得到的是干净的即时跳转，而不是被强制看一段他们不需要的动画。

对实际工作的影响在于架构选择上。以前「MPA 没法做平滑过渡」这句话不只是一个 UI 问题，它直接导致了大量项目选择了比实际需求复杂得多的技术栈。今天这条限制彻底没了。内容为主的站点、文档站、电商列表页——这些本来就不需要 SPA 带来的所有复杂性，现在可以在保持 MPA 简单性的同时，拥有同样流畅的视觉体验。

这个变化真正改变的是技术选型的逻辑。SPA 的一个核心优势一直是「能做页面过渡动画」，这个优势现在已经被 CSS 本身覆盖了。你的下一个内容站点，真的还需要为动画效果上一个完整的 SPA 框架吗？

现在可以做的事：把 @view-transition { navigation: auto; } 写进两三个页面的 CSS 里，看看效果。真的只需要这么一行。