View Transitions API 页面过渡与导航动画实践

概述View Transitions API 为单页应用（SPA）与同源导航提供统一的页面过渡机制，避免自定义动画与状态错位带来的闪烁与不一致。结合 Navigation API 的同源导航钩子，可以对路由切换与组件局部过渡实施稳定动画并保证可访问性。关键参数/概念document.startViewTransition(callback): 启动一次受控过渡，回调内执行 DOM 更新。::view-transition-old / ::view-transition-new: 伪元素用于定义旧视图与新视图的过渡样式。view-transition-name: 为元素命名以实现跨页面的对应过渡（例如图片与卡片）。navigation.addEventListener('navigate'): 监听同源导航，结合 startViewTransition 执行过渡。prefers-reduced-motion: 尊重用户的动画偏好，确保可访问性。实践/示例路由切换过渡：// 在路由层集成（示例：React Router/自定义路由） navigation.addEventListener('navigate', (event) => { if (!event.canIntercept) return; event.intercept({ handler: () => document.startViewTransition(async () => { // 在此执行路由状态更新或渲染 await router.navigate(event.destination.url); }) }); }); 元素命名过渡（图片卡片）：<img src="/thumb.jpg" style="view-transition-name: card-thumb" /> ::view-transition-old(card-thumb), ::view-transition-new(card-thumb) { animation-duration: 250ms; animation-timing-function: ease; } 局部组件过渡：function switchTab(nextTab) { document.startViewTransition(() => setTab(nextTab)); } 验证方法在支持环境下（Chromium 系列浏览器）启用过渡并观察动画一致性与无闪烁。使用 Lighthouse/Web Vitals 监控 INP 与视觉稳定性（避免布局抖动）。通过 prefers-reduced-motion 配置验证在用户禁用动效时逻辑正确回退。注意事项仅支持同源导航；跨源跳转不可用。谨慎为大面积布局设置过渡，避免引入卡顿与绘制压力。必须为关键元素设置 view-transition-name 才能实现跨页面对应过渡。保持过渡时的图片尺寸与布局占位一致，避免 CLS。