Nevermind

使用 View Transitions API 打造无缝的页面过渡动画

5 min

1. 页面跳转的体验鸿沟

在 Web 开发中，我们长期面临一个体验上的两难选择：

  • 多页应用 (MPA): 架构简单、稳定，但每次页面跳转都会有一次完整的加载，带来“白屏”或“闪烁”，体验不连贯。
  • 单页应用 (SPA): 通过前端路由实现了流畅的“无刷新”体验，但开发者需要手动处理复杂的过渡动画、状态管理和代码分割，开发成本高昂。

有没有一种方法，既能保持 MPA 的简单性，又能获得 SPA 的流畅过渡体验？View Transitions API 正是为此而生。

2. View Transitions API 是什么？

View Transitions API 是一个浏览器原生 API，它提供了一种机制，让我们能够轻松地在两个不同的 DOM 状态之间创建动画过渡。

它的核心工作流程非常简单：

  1. 当你触发一个转换时，API 会对当前页面（旧状态）进行“截图”。
  2. 然后，你用 JavaScript 更新 DOM 到新状态。
  3. API 会对新页面（新状态）也进行“截图”。
  4. 最后，浏览器会在“旧截图”和“新截图”之间创建一个平滑的默认过渡动画（通常是淡入淡出）。

这一切都由浏览器在底层高效处理，我们只需要调用一个简单的函数。

3. 如何使用？

在单页应用中，使用 View Transitions 非常简单。只需将你的 DOM 更新逻辑包裹在 document.startViewTransition 函数中即可。

// 假设你有一个更新页面内容的函数
async function updatePageContent(url) {
  const response = await fetch(url);
  const newHtml = await response.text();
  // 用新内容替换旧内容 (具体实现取决于你的架构)
  document.body.innerHTML = newHtml;
}

// 在导航链接的点击事件中调用
document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault();
  const url = event.target.href;

  // 检查浏览器是否支持
  if (!document.startViewTransition) {
    updatePageContent(url); // 不支持则直接更新
    return;
  }

  // 使用 View Transition
  document.startViewTransition(() => updatePageContent(url));
});

仅仅这样，你的页面跳转就会带上一个默认的淡入淡出效果！

4. 自定义过渡动画

默认的淡入淡出效果很棒，但 API 的真正威力在于其可定制性。当 startViewTransition 运行时，浏览器会创建一个包含以下伪元素的 DOM 结构：

  • ::view-transition: 根元素，包含了整个过渡。
  • ::view-transition-old(root): 旧视图的“截图”。
  • ::view-transition-new(root): 新视图的“截图”。

我们可以通过 CSS animation 来覆盖默认效果，例如实现一个滑入动画：

@keyframes slide-in {
  from { transform: translateX(100%); }
}

::view-transition-new(root) {
  animation: slide-in 0.5s ease-out;
}

5. 元素间的“变形”：view-transition-name

API 最令人惊艳的功能是能够让两个页面中的 不同元素 被识别为 同一个对象，并在这两个元素之间创建平滑的“变形”动画。

这通过 view-transition-name 这个 CSS 属性实现。

页面 A (列表页):

<img src="thumbnail.jpg" style="view-transition-name: hero-image;" />

页面 B (详情页):

<img src="full-size.jpg" style="view-transition-name: hero-image;" />

当从页面 A 跳转到页面 B 时，浏览器看到两个元素的 view-transition-name 相同，它就会自动计算它们在位置、尺寸、形状上的差异，并生成一个平滑的过渡动画，而不是简单的淡入淡出。这对于图片、卡片等元素的过渡效果极佳。

结论

View Transitions API 为 Web 带来了期待已久的原生过渡能力。它极大地简化了过去需要复杂 JavaScript 动画库才能实现的交互效果，让打造电影般流畅的应用体验变得前所未有的简单。随着 Astro、Nuxt 等框架的集成，以及未来在多页应用中的普及，它必将成为现代 Web 开发者的标准技能之一。

CSS View Transitions Animation UX