CSS View Transitions：页面与路由状态过渡实践

概述

View Transitions 提供页面状态切换时的视觉过渡机制，覆盖同文档 DOM 更新与跨文档导航。核心能力包括 document.startViewTransition、共享元素命名 view-transition-name 以及伪元素 ::view-transition-old() 与 ::view-transition-new() 的样式控制。

用法/示例

同文档过渡

const transition = document.startViewTransition(() => {
  document.querySelector('.panel').classList.toggle('is-open')
})

.panel { view-transition-name: panel }
::view-transition-old(panel), ::view-transition-new(panel) { animation-duration: 300ms }

跨导航共享元素过渡

两页中为相同的关键元素赋予统一的 view-transition-name，浏览器在导航间生成连续过渡。

.hero { view-transition-name: hero }

document.querySelector('a.nav').addEventListener('click', e => {
  e.preventDefault()
  document.startViewTransition(() => { location.href = e.currentTarget.href })
})

工程建议

• 优先使用合成属性（transform、opacity）以减少重绘与栅格化成本。
• 针对大图与复杂阴影降低过渡时长或在低端设备禁用。
• 尊重无动效偏好：

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0ms }
}

参考与验证

• MDN：document.startViewTransition — https://developer.mozilla.org/docs/Web/API/Document/startViewTransition
• web.dev：View Transitions 指南 — https://web.dev/articles/view-transitions
• 规范草案（WICG）：https://github.com/WICG/view-transitions