浏览器中 View Transitions API 的简单介绍

View Transitions API 解决了 Web 开发中的一个基本问题：在不同视图之间创建流畅、类似原生应用的过渡效果，而无需复杂的 JavaScript 动画或重型库。如果您曾经希望您的 Web 应用在页面导航或内容更新时能像移动应用一样流畅，那么这个 API 正是您所需要的。

本文介绍了什么是 View Transitions API，为什么它是现代 Web 应用的游戏规则改变者，以及如何实现同文档过渡（用于 SPA）和跨文档过渡（用于 MPA）。您将学习基本的代码模式，了解当前的浏览器支持情况，并发现如何渐进式地实现这些过渡效果。

什么是 View Transitions API？

View Transitions API 是一个浏览器功能，能够在不同的 DOM 状态之间实现流畅的动画过渡。这个 API 不需要突兀的页面变化或复杂的动画库，而是通过简单的 CSS 和最少的 JavaScript 来处理捕获视觉状态和在它们之间进行动画的繁重工作。

可以将其想象为浏览器在变化前后对您的页面进行快照，然后在它们之间平滑地变形。该 API 的工作原理是：

1. 捕获当前的视觉状态
2. 在渲染被抑制的情况下更新 DOM
3. 捕获新的视觉状态
4. 在两个状态之间创建平滑的过渡

这种方法消除了传统 Web 过渡的挑战：管理 z-index、防止布局跳跃、处理中断的动画，以及在状态变化期间保持可访问性。

为什么 View Transitions 对现代 Web 应用很重要

传统的 Web 导航与原生移动应用相比感觉很突兀。用户期望平滑的过渡效果，这些过渡提供视觉连续性，帮助他们理解内容的来源或去向。View Transitions API 以最少的代码将这些类似原生的体验带到了 Web 上。

主要优势包括：

• 降低复杂性：无需动画库或复杂的状态管理
• 更好的性能：浏览器优化的过渡在合成器线程上运行
• 改善用户体验：视觉连续性帮助用户保持上下文
• 内置可访问性：自动尊重用户偏好，如减少动画

同文档视图过渡（SPA）

同文档过渡在单个页面内工作，使其非常适合单页应用程序。以下是基本实现：

function navigateToNewView() {
  // 检查是否支持该 API
  if (!document.startViewTransition) {
    // 回退：不使用过渡更新 DOM
    updateDOMContent()
    return
  }

  // 创建平滑过渡
  document.startViewTransition(() => {
    updateDOMContent()
  })
}

document.startViewTransition() 方法接受一个更新 DOM 的回调函数。浏览器处理其他所有事情：捕获状态、创建动画和后续清理。

使用 CSS 自定义过渡

您可以使用 view-transition-name 属性自定义元素的过渡方式：

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

/* 自定义过渡动画 */
::view-transition-old(product-hero) {
  animation: fade-out 0.3s ease-out;
}

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

当相同的 view-transition-name 出现在新旧状态中时，这会创建平滑的变形效果，非常适合主图或持久导航元素。

跨文档视图过渡（MPA）

跨文档过渡为传统的多页应用程序带来平滑的导航。不需要调用 JavaScript，您可以通过 CSS 启用它们：

@view-transition {
  navigation: auto;
}

将此规则添加到源页面和目标页面，浏览器会在导航期间自动创建过渡。无需 JavaScript。

增强跨文档过渡

您仍然可以使用 view-transition-name 创建更复杂的效果：

/* 在两个页面上 */
.site-header {
  view-transition-name: main-header;
}

.hero-image {
  view-transition-name: hero;
}

具有匹配名称的元素将在页面之间平滑变形，而其他所有内容都会获得默认的交叉淡入淡出效果。

浏览器支持和渐进式增强

截至 2025 年 8 月，不同过渡类型的浏览器支持情况有所不同：

同文档过渡：

• ✅ Chrome 111+、Edge 111+、Safari 18+、Opera、Samsung Internet 22+
• ❌ Firefox（不支持）

跨文档过渡：

• ✅ Chrome 126+、Edge 126+、Safari 18.2+
• ❌ Firefox（不支持）

渐进式增强策略

在使用视图过渡之前，始终检查 API 支持：

// 对于同文档过渡
if (document.startViewTransition) {
  // 使用视图过渡
  document.startViewTransition(() => updateContent())
} else {
  // 直接 DOM 更新
  updateContent()
}

对于跨文档过渡，使用 CSS 功能查询：

@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }
  
  .hero {
    view-transition-name: hero;
  }
}

这确保您的 CSS 在不支持的浏览器中不会出错，同时在可用的地方提供增强的体验。

尊重用户偏好

始终遵守减少动画偏好：

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

/* 替代方案：减少过渡持续时间 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation-duration: 0.01s !important;
  }
}

实现最佳实践

1. 从简单开始：在添加复杂动画之前，先从基本的交叉淡入淡出过渡开始
2. 策略性命名：使用描述内容的语义化 view-transition-name 值
3. 测试回退：确保您的应用在没有过渡的情况下也能正常工作
4. 监控性能：复杂的过渡可能会影响较慢的设备
5. 考虑可访问性：不仅仅是减少动画，还包括焦点管理和屏幕阅读器通知

要避免的常见陷阱

• 重复名称：每个 view-transition-name 在页面内必须是唯一的
• 过度使用：不是每个交互都需要过渡
• 缺少回退：始终提供非过渡路径
• 忽略性能：在真实设备上测试，而不仅仅是高端开发机器

结论

View Transitions API 代表了 Web 用户体验的重大飞跃。通过在浏览器级别处理状态过渡的复杂性，它使开发人员能够以最少的代码创建流畅、类似应用的体验。无论您是在构建单页应用程序还是增强传统的多页站点，这个 API 都提供了使导航感觉平滑和有意图的工具。

关键是从简单开始：实现基本过渡，彻底测试，并根据浏览器功能和用户偏好逐步增强。随着浏览器支持的扩展，View Transitions API 将成为每个 Web 开发人员工具包中的必备工具。

准备在您的项目中实现视图过渡了吗？从为您的导航添加简单的交叉淡入淡出开始，然后逐步使用命名元素进行更复杂的效果增强。检查您的分析以了解用户的浏览器支持情况，并记住在真实设备上测试。Web 导航的未来是平滑、上下文相关和可访问的——它从一行代码开始。

常见问题

如果我在不支持视图过渡的浏览器上使用它们会发生什么？

什么都不会出错。DOM 更新会立即发生，没有任何过渡效果。这就是为什么功能检测很重要——它确保优雅降级。

我可以在 React、Vue 或其他框架中使用视图过渡吗？

是的，视图过渡适用于任何框架。对于同文档过渡，将您的状态更新包装在 document.startViewTransition() 中。许多框架正在添加内置支持。

视图过渡如何影响性能？

视图过渡由浏览器优化，通常比 JavaScript 动画性能更好。但是，复杂的过渡或许多过渡元素可能会影响低端设备的性能。

我可以将视图过渡与现有的 CSS 动画结合使用吗？

是的，视图过渡在底层使用标准的 CSS 动画。您可以使用熟悉的 CSS 动画属性自定义时间、缓动和效果。

为什么我需要在具有 view-transition-name 的元素上使用 contain: paint？

浏览器供应商正在重新考虑这个要求。目前，它帮助浏览器优化渲染，但未来版本可能会移除这个要求。