View Transitions API 页面过渡与路由协作实践

View Transitions API 页面过渡与路由协作实践概述View Transitions API 提供跨状态/页面的过渡动画能力，支持同文档与跨文档场景。2025 年浏览器支持已覆盖 Chrome/Edge（同/跨文档，含 view-transition-class 与类型）、Safari（同/跨文档）与 Firefox（同文档将在 144 稳定版起提供，类型逐步完善）。关键参数/概念（已验证）document.startViewTransition(updateCallback)：触发同文档过渡（Chrome 111+、Safari 18.2+、Firefox 144+）。CSS 选择器：`::view-transition-old(root)` 与 `::view-transition-new(root)` 控制旧/新状态渲染。view-transition-class：为元素打标签以在过渡中匹配（Chrome 125+、Safari 18.2+、Firefox 144+）。view-transition-name: match-element：自动命名匹配元素，简化标记（Chrome 137+、Safari 18.2+、Firefox 144+）。Navigation API pageswap/pagereveal：跨文档协作以实现 MPA 级过渡（Chrome 126+）。参考：Chrome DevRel 与 MDN 支持矩阵（2025-10/11 更新）。实践/示例同文档路由（React/Vue/原生 SPA）示例：// 以原生路由更新为例 function goto(path) { document.startViewTransition(() => { // 更新视图状态（例如切换列表到详情） history.pushState({}, '', path) render() }) } // 关键元素标记：自动命名匹配元素（Chrome 137+） // CSS：.card { view-transition-name: match-element; } 跨文档（MPA）协作：<!-- 目标页启用过渡样式 --> <style> ::view-transition-old(root), ::view-transition-new(root) { animation: none; } </style> 验证方法支持性：在 Chrome 137+/Safari 18.2+/Firefox 144+ 进行同/跨文档过渡测试。指标对比：采集 INP/LCP 与过渡完成时间，比较有/无过渡的交互体验提升。兼容性兜底：未支持浏览器分支渲染（不启用过渡样式），确保功能不受影响。注意事项内容变更必须在 updateCallback 中完成，以保证旧/新快照正确。大量元素匹配可能造成过渡生成开销，建议对关键元素使用 view-transition-class 或 match-element。Safari/Firefox 在类型与自动命名支持上进度不同，应做特性检测并渐进增强。参考资料Chrome Blog：View Transitions 2025 更新MDN：View Transition API、ViewTransition 接口官方示例站点：view-transitions.chrome.dev