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/startViewTransitionweb.dev：View Transitions 指南 — https://web.dev/articles/view-transitions规范草案（WICG）：https://github.com/WICG/view-transitions