View Transitions API MPA 与 SPA 落地模式与兼容性清单

View Transitions API MPA 与 SPA 落地模式与兼容性清单概述两类应用（MPA 与 SPA）在视图过渡的能力与限制存在差异。本文给出工程落地模式、兼容性检测与降级清单。关键参数/概念SPA 过渡：`document.startViewTransition(() => update())` 封装状态更新。MPA 过渡：跨文档共享元素需两端 `view-transition-name` 一致。兼容性：Chromium 与 Safari（部分/预览）支持较好；Firefox 仍在讨论中。实践/示例1) 能力检测与降级function withTransition(run) { const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce || !document.startViewTransition) { run(); return; } document.startViewTransition(() => run()); } 2) MPA 共享元素命名匹配<style> .logo { view-transition-name: site-logo; } ::view-transition-old(site-logo), ::view-transition-new(site-logo) { animation: fade 160ms ease } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(site-logo), ::view-transition-new(site-logo) { animation: none } } </style> 3) 兼容性清单（实践向）检测：`if (!document.startViewTransition) fallback()`Safari：关注技术预览与版本差异，确保无动画降级路径。Firefox：对滚动驱动动画需 `animation-duration: 1ms`（若使用 ViewTimeline）。验证方法多浏览器矩阵：Chrome/Edge/Safari 实测；Firefox 提供降级并记录路径。指标：INP/LCP 在 MPA 与 SPA 下分别评估；返回导航考虑 BFCache。一致性：共享元素在跨文档激活时，不出现错位与闪烁。注意事项避免强制同步布局与密集 DOM 操作，确保动画线程顺畅。命名规范与样式隔离，避免 `view-transition-name` 冲突。保持语义结构与可访问性优先，不以动画替代信息表达。参考资料MDN: `startViewTransition()` 与 ViewTransition（2025-11 更新）https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransitionhttps://developer.mozilla.org/en-US/docs/Web/API/ViewTransitionDebugBear：SPA 视图过渡与兼容性说明（2025）https://www.debugbear.com/blog/view-transitions-spa-without-framework