View Transitions API 跨路由动画与状态保留实践

概述View Transitions API 提供了跨视图切换的统一动画机制。结合 `document.startViewTransition` 与 CSS `:view-transition-name`，可以在路由变更时保持元素的视觉连续性，同时避免布局抖动与重绘开销，有助于提升 INP 与整体交互感受。关键参数与概念`document.startViewTransition(callback)`: 在回调中执行视图更新，浏览器在旧视图与新视图间生成过渡帧。`:view-transition-name`: 为需要参与过渡的元素命名，浏览器根据相同名称进行匹配与动画插值。过渡阶段伪类：`:root::view-transition-group` 与 `::view-transition-image-pair` 可用于自定义过渡样式。可访问性与性能：过渡应可被用户禁用（尊重 `prefers-reduced-motion`），避免大面积模糊与阴影以降低渲染成本。实践示例（SPA 路由）<style> .card { transition: transform 150ms ease; } .card[active] { transform: scale(1.02); } /* 为参与过渡的元素命名 */ .card-title { view-transition-name: card-title; } @media (prefers-reduced-motion: reduce) { :root::view-transition-group(*) { animation: none; } } </style> <div id="app"></div> <script type="module"> import { router } from './router.js' function render(route) { const app = document.getElementById('app') app.innerHTML = route.template } router.onChange(async (route) => { await document.startViewTransition(() => render(route)).finished }) </script> CSS 指定 `view-transition-name` 的元素会在新旧视图之间进行匹配，实现平滑过渡。通过 `startViewTransition().finished` 可等待过渡完成后进行后续逻辑。验证方法性能：使用 Performance 面板观察过渡期间的绘制与合成开销，关注 INP 与帧率。可访问性：启用 `prefers-reduced-motion` 检查是否正确禁用动画；确保焦点顺序在过渡后仍然正确。兼容性：在支持浏览器（Chrome、Edge、部分 Safari 技术预览）验证；不支持场景下回退到无动画切换。注意事项避免在过渡期间触发昂贵的布局与脚本计算；尽量使用合成层动画（transform/opacity）。保持视图更新粒度，避免一次过渡中包含过于庞大的 DOM 区域。对于列表到详情的过渡，确保参与过渡元素在新旧页面中均存在并使用相同的 `view-transition-name`。