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

## 概述 View Transitions 提供页面状态切换时的视觉过渡机制，覆盖同文档 DOM 更新与跨文档导航。核心能力包括 `document.startViewTransition`、共享元素命名 `view-transition-name` 以及伪元素 `::view-transition-old()` 与 `::view-transition-new()` 的样式控制。 ## 用法/示例 ### 同文档过渡 ```js const transition = document.startViewTransition(() => { document.querySelector('.panel').classList.toggle('is-open') }) ``` ```css .panel { view-transition-name: panel } ::view-transition-old(panel), ::view-transition-new(panel) { animation-duration: 300ms } ``` ### 跨导航共享元素过渡 两页中为相同的关键元素赋予统一的 `view-transition-name`，浏览器在导航间生成连续过渡。 ```css .hero { view-transition-name: hero } ``` ```js document.querySelector('a.nav').addEventListener('click', e => { e.preventDefault() document.startViewTransition(() => { location.href = e.currentTarget.href }) }) ``` ## 工程建议 - 优先使用合成属性（transform、opacity）以减少重绘与栅格化成本。 - 针对大图与复杂阴影降低过渡时长或在低端设备禁用。 - 尊重无动效偏好： ```css @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