写过八年 MPA，每次加跳转动画都要靠框架——今天浏览器自己会了，pageswap + pagereveal 把这件事彻底原生化了

写过 MPA（多页面应用）的人都知道，最烦的不是写页面本身，而是页面和页面之间那一下跳转——白屏闪烁、毫无过渡、一个链接跳到另一个链接用户体验断崖式下跌。SPA 还好，有 document.startViewTransition() 可以做同文档过渡；但 MPA 呢？每个页面都是独立文档，传统上只能靠框架硬塞动画。

这件事，今天彻底变了。

Chrome 126 开始，跨文档视图过渡（Cross-Document View Transitions）正式落地——不需要框架，不需要 JS，一行 CSS，MPA 页面跳转也能做丝滑的过渡动画了。

怎么做到的：三件套

实现 MPA 跳转过渡，靠的是三个东西：

1. @view-transition at-rule

在每个参与过渡的页面 CSS 里写一行：

@view-transition {
  navigation: auto;
}

就这一行，浏览器就知道「这个页面要参与跨文档过渡」，跳转到同源其他页面时会自动触发过渡动画，默认是淡入淡出。

2. pageswap 事件

旧页面即将被替换时触发，发生在导航真正发生之前。在这个事件里可以读取 ViewTransition 对象，甚至可以动态改写过渡效果：

window.addEventListener("pageswap", (event) => {
  if (event.viewTransition) {
    // 自定义旧页面的动画
  }
});

3. pagereveal 事件

新页面 DOM 加载完毕、即将显示时触发。可以在这里做懒加载内容的预填充，或者做更精细的进入动画控制：

window.addEventListener("pagereveal", (event) => {
  if (event.viewTransition) {
    event.viewTransition.ready.then(() => {
      // 新页面已经准备好，动画即将开始
    });
  }
});

整个流程是：点击链接 → 旧页面触发 pageswap（做退出动画）→ 导航发生 → 新页面触发 pagereveal（做进入动画）→ 过渡完成。浏览器原生兜底，开发者只负责声明和定制。

为什么比框架方案更好

用框架做过 MPA 过渡的都知道这套有多绕：框架路由劫持请求、预加载下一页内容、placeholder 占位、动画和状态同步……一个没配好就是白屏或者内容跳位。

原生方案的核心优势有两点：

快照机制是浏览器级别的。 旧页面会被抓取静态快照「冻结」在原地，用户看到的退出动画是真实 DOM 的像素级复制，不会有任何交互干扰。新页面进来同理——新页面 DOM 实时可交互，但视觉上在做进入动画，用户感知到的体验是流畅的，实质上动画和内容加载是并行发生的。

不需要维护任何状态。 框架方案最麻烦的是「当前在哪个页面」「过渡有没有在跑」「返回操作要不要反向动画」——这些全部由浏览器内置的 View Transition 状态机接管，开发者的代码只需要声明「我要参与」和「我要自定义什么」。

怎么给不同元素做不同过渡

默认是全文档一起淡入淡出，但可以用 view-transition-name 给特定元素单独定义过渡：

/* 头部导航保持不动 */
.header {
  view-transition-name: none;
}

/* 产品卡片做独立过渡 */
.product-card {
  view-transition-name: product-card;
}

旧页面里 view-transition-name: product-card 的元素，会和新页面里同样名字的元素做「配对」——浏览器会自动追踪这两个元素在两个页面里的几何位置差异，生成从旧位置到新位置的位移动画，而不是简单的整体淡入淡出。

这意味着：用户从列表页点进详情页，列表里的那张产品卡片可以直接「飞」到详情页对应的位置上。这种体验在以前只有 SPA 能做到，而且要自己写 FLIP 动画——现在 MPA 也能原生实现。

写在最后

跨文档 View Transitions 这件事的意义不只是「少用一个框架」——它把 MPA 和 SPA 在过渡动画上的体验差距彻底抹平了。以前选 MPA 还是 SPA，性能是一方面，用户体验是另一方面；现在动画这一块两者站在同一起跑线上。

下一步建议： 如果你还在用传统 MPA，往页面 CSS 里加一行 @view-transition { navigation: auto; }，加一个 <link rel="prefetch"> 预加载下一页，然后点一个链接试试看。如果已经有过渡框架在跑，可以对照 Chrome DevTools 里的 View Transitions 调试面板，看看原生方案能否替代现有方案。