View Transitions API 实战：丝滑的页面过渡

页面切换是用户体验的关键一环。过去实现页面过渡动画往往需要复杂的框架支持，如今 View Transitions API 把它变成了几行原生代码。

它解决了什么

View Transitions API 让浏览器自动捕捉切换前后的状态快照，并在两者之间做平滑过渡。你只需声明「我要过渡」，浏览器负责截图、合成与动画。

最简用法

对 SPA，调用一个 API 即可：

document.startViewTransition(() => {
  updateDOM(); // 更新内容的函数
});

浏览器会冻结旧状态、执行更新、再平滑过渡到新状态。

跨页面（MPA）过渡

配合 CSS 与 @view-transition 规则，甚至能在整页跳转时保持过渡：

@view-transition {
  navigation: auto;
}

这样传统多页应用也能获得丝滑的页面切换动画。

自定义动画

你可以用 ::view-transition-old 与 ::view-transition-new 伪元素自定义过渡：

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

注意事项

• 动画期间不要修改被捕获的元素，否则可能闪烁；
• 注意 prefers-reduced-motion，为偏好减少动效的用户关闭动画；
• 复杂布局的过渡可能出现跳变，需针对关键元素指定过渡。

结语

View Transitions API 把「页面过渡动画」从框架专属能力变成了平台能力。随着浏览器支持度提升，它正成为现代前端体验的标准件。