View Transitions

一句话： document.startViewTransition() 捕获旧 DOM 的快照，让您更新 DOM， 然后自动在两者之间动画——@view-transition 将相同的机制扩展到跨页面导航。

同文档（SPA）过渡

调用 document.startViewTransition(callback) 来动画 DOM 更新：

document.startViewTransition(() => {
  // 在这里更新 DOM——交换内容、切换类等。
  updateDOM();
});

浏览器自动：

1. 捕获当前（“旧”）视觉状态的快照。
2. 运行您的回调以产生新的 DOM 状态。
3. 捕获新状态的快照。
4. 默认使用交叉淡入淡出在新旧之间动画。
5. 动画完成后移除旧快照。

该方法返回一个 ViewTransition 对象，带有每个生命周期阶段的 Promise—— updateCallbackDone、ready、finished——以及一个 skipTransition() 方法。

跨文档（MPA）过渡

CSS @view-transition 规则将旧文档和新文档都纳入导航时的视图过渡：

@view-transition {
  navigation: auto;
}

根据规范（CSS View Transitions Module Level 2），跨文档过渡在旧页面上使用 pageswap 事件，在新页面上使用 pagereveal 事件来操作过渡。

使用 CSS 自定义

元素通过 view-transition-name 参与命名过渡：

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

浏览器为快照树生成伪元素：

伪元素	用途
::view-transition	根覆盖层
::view-transition-group(<name>)	命名过渡组的容器
::view-transition-image-pair(<name>)	包装新旧快照
::view-transition-old(<name>)	捕获的“旧”快照
::view-transition-new(<name>)	捕获的“新”快照

您可以使用标准 CSS @keyframes 来动画这些：

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

view-transition-class

view-transition-class（CSS View Transitions Level 2）将多个元素分组， 使它们共享相同的过渡样式，而无需相同的 view-transition-name 值。

浏览器支持

View Transitions API 在两个 W3C 规范中定义：

• Level 1（同文档 / SPA）：在 Chromium 浏览器中发布（Chrome 111+）。 Safari 和 Firefox 在后续版本中添加了支持。
• Level 2（跨文档 / MPA）：更新，浏览器支持更近期。

根据 MDN，document.startViewTransition() 在标准轨道上，不再标记为实验性。

降级方案

如果 API 不可用，document.startViewTransition() 未定义。调用前进行特性检测：

if (!document.startViewTransition) {
  // 直接更新 DOM
  updateDOM();
  return;
}
document.startViewTransition(() => updateDOM());

← 返回性能。