View Transitions API 实战：浏览器原生页面过渡动画，告别 JavaScript 动画库

页面切换时的白屏闪烁是 Web 应用体验的头号杀手。过去我们依赖 GSAP、Framer Motion 或自定义 JavaScript 动画库来实现平滑过渡，但这些方案动辄增加 50-100KB 的包体积，还需要手动管理 DOM 状态同步。View Transitions API 是浏览器原生提供的页面过渡方案，用不到 20 行 CSS 就能实现曾经需要数百行 JS 才能完成的动画效果——而且性能更好，因为它运行在合成线程上，不阻塞主线程。

截至 2026 年 6 月，View Transitions API 已在 Chrome 111+、Edge 111+、Safari 18+ 和 Firefox 144+ 中获得支持，覆盖全球 92% 以上的浏览器份额。本文将从原理到实战，带你掌握这个改变 Web 动画格局的原生 API。

🎬 一、View Transitions 核心原理与 SPA 实战

1.1 为什么需要 View Transitions？

在传统 Web 应用中，页面切换有两种体验：

⚠️ 关键区别： View Transitions 在状态切换期间会自动对旧状态拍照（snapshot），然后在动画期间显示这张快照，直到新状态完全渲染。这意味着用户永远看不到中间状态的空白或布局抖动。

1.2 SPA 同文档过渡基础

最简单的使用方式是在 SPA 中调用 document.startViewTransition()：

// 最基础的 View Transition：SPA 页面切换
// 当你更新 DOM 时，只需用 startViewTransition 包裹
async function navigateTo(newContent) {
  const transition = document.startViewTransition(async () => {
    // 这个回调内完成所有 DOM 更新
    document.getElementById('content').innerHTML = newContent;
  });

  // 等待动画完成（可选）
  await transition.finished;
  console.log('过渡动画已完成');
}

// 实际场景：SPA 路由切换
class Router {
  constructor() {
    this.routes = new Map();
    window.addEventListener('popstate', () => this.handleRoute());
  }

  add(path, handler) {
    this.routes.set(path, handler);
  }

  async navigate(path) {
    history.pushState(null, '', path);
    await this.handleRoute();
  }

  async handleRoute() {
    const path = location.pathname;
    const handler = this.routes.get(path) || this.routes.get('/404');

    if (!document.startViewTransition) {
      // 降级方案：直接更新 DOM
      handler();
      return;
    }

    // 使用 View Transition 包裹路由切换
    const transition = document.startViewTransition(async () => {
      handler();
    });

    await transition.finished;
  }
}

// 使用示例
const router = new Router();
router.add('/', () => {
  document.getElementById('app').innerHTML = '<h1>首页</h1><p>欢迎回来</p>';
});
router.add('/about', () => {
  document.getElementById('app').innerHTML = '<h1>关于我们</h1><p>团队介绍</p>';
});

1.3 为元素命名：view-transition-name

真正的魔法在于 view-transition-name 属性。它告诉浏览器哪些元素需要在页面切换间保持连续性——浏览器会自动为同名元素创建从旧位置到新位置的平滑动画。

/* 为需要连续性的元素命名 */
.hero-image {
  view-transition-name: hero;
}

.page-title {
  view-transition-name: title;
}

.sidebar-nav {
  view-transition-name: sidebar;
}

/* 浏览器会自动为这些元素生成动画：
   - hero: 从旧页面的 .hero-image 位置 → 新页面的 .hero-image 位置
   - title: 从旧页面的 .page-title 位置 → 新页面的 .page-title 位置
   - sidebar: 保持不变（如果位置没变，就不会有动画）
*/

/* ⚠️ 重要：view-transition-name 必须在页面上唯一 */
/* ❌ 错误：多个元素使用同一个 name 会导致动画异常 */
.card:nth-child(1) { view-transition-name: card; }
.card:nth-child(2) { view-transition-name: card; } /* 冲突！ */

/* ✅ 正确：使用唯一的 name */
.card:nth-child(1) { view-transition-name: card-1; }
.card:nth-child(2) { view-transition-name: card-2; }

📌 记住： view-transition-name 的值必须是唯一的，不能有两个元素共享同一个 name。如果需要动态生成，可以用 JavaScript 设置 element.style.viewTransitionName = 'unique-name'。

🌐 二、MPA 跨文档过渡与高级动画

2.1 Cross-Document View Transitions（MPA 场景）

从 Chrome 126 开始，View Transitions 支持跨文档（MPA）过渡。这意味着即使你的网站是传统的多页面应用，也能实现 SPA 般的流畅导航——不需要任何 JavaScript。

跨文档过渡的工作原理与同文档过渡不同。在同文档过渡中，你用 JavaScript 包裹 DOM 更新；而在跨文档过渡中，浏览器在两个独立页面之间自动创建过渡。你需要做的只是在 CSS 中声明 @view-transition 并为需要连续性的元素设置 view-transition-name。

💡 提示： 跨文档过渡要求两个页面属于同一个源（same-origin）。不同源的页面之间无法使用 View Transitions。此外，前进/后退导航（通过浏览器按钮）也会触发跨文档过渡。

/* 在目标页面的 CSS 中声明跨文档过渡 */
/* 当用户从任何页面导航到本页面时自动生效 */

@view-transition {
  navigation: auto; /* 启用跨文档过渡 */
}

/* 为页面元素命名，与 SPA 方式相同 */
.product-card {
  view-transition-name: product;
}

.product-detail-hero {
  view-transition-name: product;
}

<!-- 列表页：product-list.html -->
<a href="/product/42" class="product-card">
  <img src="thumb.jpg" style="view-transition-name: product-img-42" />
  <h3 style="view-transition-name: product-title-42">iPhone 16 Pro</h3>
</a>

<!-- 详情页：product-detail.html -->
<div class="product-detail">
  <img src="hero.jpg" style="view-transition-name: product-img-42" />
  <h1 style="view-transition-name: product-title-42">iPhone 16 Pro</h1>
</div>

<!-- 浏览器自动创建：缩略图 → 大图的平滑放大动画
     标题位置的平滑移动动画 -->

2.2 自定义过渡动画

默认动画是淡入淡出（crossfade），但你可以用 CSS 完全自定义。View Transitions 提供了三个关键的伪元素选择器：

• ::view-transition-group(name) — 控制整个过渡组（包含旧状态和新状态）
• ::view-transition-old(name) — 控制旧状态快照的动画
• ::view-transition-new(name) — 控制新状态快照的动画

你可以为整个页面（root）或特定元素（自定义 name）分别设置不同的动画效果。

/* 自定义整个过渡的时长和缓动 */
::view-transition-group(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 自定义旧状态（离开的元素）的动画 */
::view-transition-old(hero) {
  animation: 0.3s ease-out both slide-out-left;
}

/* 自定义新状态（进入的元素）的动画 */
::view-transition-new(hero) {
  animation: 0.3s ease-in both slide-in-right;
}

/* 为特定元素定义完全不同的动画 */
::view-transition-old(title) {
  animation: 0.25s ease-out both fade-out-scale;
}

::view-transition-new(title) {
  animation: 0.35s ease-in both fade-in-slide-up;
  animation-delay: 0.1s; /* 新标题延迟出现 */
}

/* 关键帧定义 */
@keyframes slide-out-left {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-30px); opacity: 0; }
}

@keyframes slide-in-right {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fade-out-scale {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.8); opacity: 0; }
}

@keyframes fade-in-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

2.3 JavaScript 控制精细动画

对于更复杂的场景，可以通过 JavaScript 控制过渡的每个阶段：

// 精细控制 View Transition
async function fancyTransition(updateCallback) {
  if (!document.startViewTransition) {
    updateCallback();
    return;
  }

  const transition = document.startViewTransition({
    update: updateCallback,
    types: ['slide-left'] // 自定义过渡类型
  });

  // 过渡准备就绪（快照已捕获，动画即将开始）
  transition.ready.then(() => {
    console.log('动画开始');
    // 可以在这里用 Web Animations API 做更精细的控制
  });

  // 新状态的快照已捕获
  transition.updateCallbackDone.then(() => {
    console.log('DOM 已更新');
  });

  // 动画完全结束
  transition.finished.then(() => {
    console.log('过渡完成');
    // 清理工作
  });

  return transition;
}

// 配合 View Transition Types 实现条件动画
document.addEventListener('click', async (e) => {
  const link = e.target.closest('[data-transition]');
  if (!link) return;

  e.preventDefault();
  const type = link.dataset.transition; // 'slide', 'fade', 'zoom'

  const transition = document.startViewTransition({
    async update() {
      const response = await fetch(link.href);
      const html = await response.text();
      document.getElementById('content').innerHTML = html;
    },
    types: [type]
  });

  await transition.finished;
});

/* 根据过渡类型应用不同动画 */
html[data-view-transition-type="slide"]::view-transition-old(root) {
  animation: 0.3s ease-out both slide-out-left;
}

html[data-view-transition-type="slide"]::view-transition-new(root) {
  animation: 0.3s ease-in both slide-in-right;
}

html[data-view-transition-type="zoom"]::view-transition-group(hero) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

💡 提示： document.startViewTransition() 的 types 参数允许你定义过渡类型，然后在 CSS 中用 html[data-view-transition-type="xxx"] 选择器来匹配不同类型的过渡动画。这比在 JS 中直接操作动画要优雅得多。

⚡ 三、性能对比、兼容性与生产实践

3.1 性能对比

View Transitions 最大的优势是性能。传统 JavaScript 动画库（如 GSAP、Framer Motion）需要在主线程上计算每一帧的 DOM 变换，这会导致布局重排（reflow）和绘制（repaint）。而 View Transitions 的动画完全运行在浏览器的合成线程（compositor thread）上，主线程只负责捕获快照和更新 DOM，动画过程中的每一帧渲染都不需要主线程参与。

这意味着：即使你的主线程正在执行复杂的 JavaScript 计算（比如处理用户输入、发起网络请求），过渡动画也不会卡顿。这是 JavaScript 动画库永远无法达到的性能水平。

以下是真实场景的对比测试数据（在 MacBook Pro M2 上测试，页面包含 50 个 DOM 节点）：

⚡ 关键结论： View Transitions 的动画运行在浏览器合成线程上，完全不阻塞主线程的 JavaScript 执行。这意味着在动画过程中，你的应用逻辑、网络请求、用户交互都不会受到影响。

3.2 与框架集成

View Transitions 可以无缝集成到主流框架中：

// React + View Transitions 集成示例
import { useViewTransition } from './hooks/useViewTransition';

function ProductList({ products }) {
  const { startTransition } = useViewTransition();

  const handleClick = (product) => {
    startTransition(() => {
      // React 状态更新
      setSelectedProduct(product);
    });
  };

  return (
    <div className="product-grid">
      {products.map(product => (
        <div
          key={product.id}
          className="product-card"
          style={{ viewTransitionName: `product-${product.id}` }}
          onClick={() => handleClick(product)}
        >
          <img src={product.thumbnail} />
          <h3>{product.title}</h3>
        </div>
      ))}
    </div>
  );
}

// useViewTransition Hook 实现
export function useViewTransition() {
  const startTransition = (callback) => {
    if (!document.startViewTransition) {
      // 降级：直接执行回调
      callback();
      return;
    }

    return document.startViewTransition(callback);
  };

  return { startTransition, isSupported: !!document.startViewTransition };
}

3.3 兼容性处理与降级策略

// 完整的降级策略
class ViewTransitionManager {
  constructor() {
    this.isSupported = !!document.startViewTransition;
    this.prefersReducedMotion = window.matchMedia(
      '(prefers-reduced-motion: reduce)'
    ).matches;
  }

  async transition(updateFn, options = {}) {
    // 尊重用户的动画偏好设置
    if (this.prefersReducedMotion) {
      await updateFn();
      return { finished: Promise.resolve() };
    }

    if (!this.isSupported) {
      // 方案1：直接更新（最简单）
      if (options.fallback === 'none') {
        await updateFn();
        return { finished: Promise.resolve() };
      }

      // 方案2：使用 CSS transition 降级
      if (options.fallback === 'css') {
        return this.cssFallback(updateFn);
      }

      // 方案3：使用 JS 动画降级
      if (options.fallback === 'js') {
        return this.jsFallback(updateFn, options.duration || 300);
      }

      await updateFn();
      return { finished: Promise.resolve() };
    }

    // 原生支持：使用 View Transitions
    return document.startViewTransition(updateFn);
  }

  async cssFallback(updateFn) {
    const container = document.getElementById('content');
    container.style.transition = 'opacity 0.2s ease-out';
    container.style.opacity = '0';

    await new Promise(r => setTimeout(r, 200));
    await updateFn();

    container.style.opacity = '1';
    await new Promise(r => setTimeout(r, 200));
    container.style.transition = '';
  }

  async jsFallback(updateFn, duration) {
    const container = document.getElementById('content');
    const animation = container.animate(
      [
        { opacity: 1, transform: 'translateY(0)' },
        { opacity: 0, transform: 'translateY(-10px)' }
      ],
      { duration: duration / 2, fill: 'forwards' }
    );

    await animation.finished;
    await updateFn();

    container.animate(
      [
        { opacity: 0, transform: 'translateY(10px)' },
        { opacity: 1, transform: 'translateY(0)' }
      ],
      { duration: duration / 2, fill: 'forwards' }
    );
  }
}

// 使用
const vt = new ViewTransitionManager();
await vt.transition(
  () => { document.getElementById('app').innerHTML = newPage; },
  { fallback: 'css', duration: 300 }
);

3.4 生产环境最佳实践

在生产中使用 View Transitions，有几个关键的注意事项：

/* ✅ 推荐：配合 prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ✅ 推荐：限制 view-transition-name 的使用范围 */
/* 只在需要连续性的关键元素上使用，不要滥用 */
.hero-section img {
  view-transition-name: hero-img;
}
/* ❌ 避免：给每个元素都加 view-transition-name */
/* 这会导致浏览器创建大量快照，消耗内存 */

/* ✅ 推荐：使用 contain 优化性能 */
.product-card {
  view-transition-name: product;
  contain: layout style paint; /* 提示浏览器优化渲染 */
}

// ✅ 推荐：在 View Transition 中处理异步操作
async function loadAndTransition(url) {
  const transition = document.startViewTransition(async () => {
    // 1. 先加载数据
    const data = await fetch(url).then(r => r.json());

    // 2. 再更新 DOM（在同一个 transition 回调中）
    renderPage(data);
  });

  // ❌ 避免：在 transition 外部更新 DOM
  // 这会导致快照与最终状态不一致

  await transition.finished;
}

⚠️ 警告： 不要在 startViewTransition 的回调中执行过长的异步操作。浏览器会等待回调完成才开始动画，如果超过 300ms，用户会感觉到延迟。如果需要加载远程数据，建议先预加载数据，再调用 startViewTransition。

3.5 浏览器兼容性速查

3.6 真实场景：电商商品列表到详情的过渡

电商网站是 View Transitions 最典型的应用场景。用户点击商品卡片后，图片从缩略图平滑放大为详情页的大图，标题从卡片位置移动到页面顶部——这种「共享元素过渡」（shared element transition）在 Android 原生应用中很常见，现在 Web 也能轻松实现。

// 电商场景：商品列表 → 商品详情的过渡
class ProductPage {
  constructor() {
    this.products = [];
  }

  renderList() {
    const container = document.getElementById('product-grid');
    container.innerHTML = this.products.map(p => `
      <article class="product-card" data-id="${p.id}">
        <div class="card-image">
          <img src="${p.thumbnail}"
               alt="${p.title}"
               style="view-transition-name: product-img-${p.id}" />
        </div>
        <h3 style="view-transition-name: product-title-${p.id}">
          ${p.title}
        </h3>
        <p class="price">¥${p.price}</p>
      </article>
    `).join('');

    // 绑定点击事件
    container.querySelectorAll('.product-card').forEach(card => {
      card.addEventListener('click', () => {
        const id = card.dataset.id;
        this.navigateToDetail(id);
      });
    });
  }

  async navigateToDetail(productId) {
    if (!document.startViewTransition) {
      this.renderDetail(productId);
      return;
    }

    const transition = document.startViewTransition(async () => {
      this.renderDetail(productId);
    });

    await transition.finished;
  }

  renderDetail(productId) {
    const product = this.products.find(p => p.id === productId);
    document.getElementById('app').innerHTML = `
      <div class="product-detail">
        <button class="back-btn" onclick="productPage.renderList()">
          ← 返回列表
        </button>
        <div class="detail-hero">
          <img src="${product.image}"
               alt="${product.title}"
               style="view-transition-name: product-img-${product.id}" />
        </div>
        <h1 style="view-transition-name: product-title-${product.id}">
          ${product.title}
        </h1>
        <p class="price">¥${product.price}</p>
        <p class="description">${product.description}</p>
      </div>
    `;
  }
}

对应的 CSS 只需要几行就能实现平滑的缩放和位移动画：

/* 商品图片：从缩略图平滑放大到大图 */
::view-transition-group(product-img-*) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* 商品标题：平滑移动到新位置 */
::view-transition-group(product-title-*) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* 整体页面：淡入淡出 */
::view-transition-old(root) {
  animation: 0.25s ease-out both fade-out;
}

::view-transition-new(root) {
  animation: 0.3s ease-in both fade-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

💡 提示： 在上面的例子中，我们使用了通配符 product-img-* 来匹配所有商品图片的过渡组。这样就不需要为每个商品单独写 CSS 规则，大大减少了代码量。

3.7 常见踩坑与避坑指南

在实际项目中使用 View Transitions，以下几个坑点值得特别注意：

坑点 1：view-transition-name 重复导致动画错乱

当你从列表页导航到详情页时，列表项的 view-transition-name 必须与详情页中对应元素的 view-transition-name 一致。如果列表中有 10 个项目，你需要为每个项目设置唯一的 name（如 item-1、item-2），并在详情页中使用相同的 name。

坑点 2：图片尺寸变化导致动画变形

当缩略图（如 200x200）过渡到大图（如 800x600）时，默认行为是保持宽高比并居中对齐。但如果你的图片容器有 object-fit: cover，快照可能与实际渲染不一致。解决方案是确保两个页面的图片容器使用相同的 object-fit 和 object-position。

坑点 3：异步数据加载导致快照不完整

如果你在 startViewTransition 的回调中发起网络请求，浏览器会等待请求完成才创建新状态的快照。这会导致动画延迟。最佳实践是先完成数据加载，再调用 startViewTransition 更新 DOM。

坑点 4：滚动位置丢失

页面过渡后，滚动位置会重置为 0。如果你希望保持滚动位置，需要在 startViewTransition 的回调中手动恢复：

// 保持滚动位置的过渡
async function transitionWithScroll(updateFn) {
  const scrollY = window.scrollY;

  const transition = document.startViewTransition(async () => {
    await updateFn();
    // 在 DOM 更新后恢复滚动位置
    window.scrollTo(0, scrollY);
  });

  await transition.finished;
}

截至 2026 年 6 月，全球 92%+ 的浏览器已支持同文档过渡，跨文档过渡覆盖率约为 85%。配合上面的降级策略，可以放心在生产环境使用。

📝 总结

View Transitions API 是近年来浏览器平台最重要的动画能力升级。它让页面过渡从「需要第三方库 + 大量代码」变成了「浏览器原生支持 + 几行 CSS」。

核心要点回顾：

• ✅ SPA 场景：用 document.startViewTransition() 包裹 DOM 更新
• ✅ MPA 场景：用 @view-transition { navigation: auto; } 启用跨文档过渡
• ✅ 元素连续性：用 view-transition-name 命名需要保持连续的元素
• ✅ 自定义动画：通过 ::view-transition-old() 和 ::view-transition-new() 自定义
• ✅ 性能优势：动画在合成线程运行，不阻塞主线程，FPS 稳定 60
• ✅ 降级策略：检测支持情况，提供 CSS/JS 降级方案

相关工具推荐：

• 🔧 View Transitions API MDN 文档
• 🔧 Jake Archibald 的 View Transitions Demo
• 🔧 Chrome DevTools：在 Performance 面板中查看 View Transition 时间线
• 🔧 jsjson.com JSON 格式化工具 — 在浏览器端安全格式化你的 JSON 数据