view transitions api 不支持真正跨页面共享元素过渡，仅限单页内dom替换；根本原因在于view-transition-name作用域限于当前document、mpa导航默认不触发过渡、且新旧dom结构无法建立像素映射；正确做法是改为同页面双态切换，确保同名view-transition-name节点共存于同一dom树中。
View Transitions API 本身不支持真正意义上的“跨页面”共享元素过渡——它只在单页内生效，所谓“跨页面”其实是浏览器对 MPA（多页应用）的特殊支持，本质仍是同源文档内、由 document.startViewTransition() 包裹的 DOM 替换过程。真正的共享元素动画（比如列表项图片飞入详情页）必须满足：同一页面、同名 view-transition-name、前后 DOM 节点稳定存在且可映射。
为什么不能直接用 View Transitions 做“卡片 → 新页面”的共享元素？
浏览器会静默失败或抛出 TypeError: Failed to execute 'startViewTransition' on 'Document': No view transition is active。根本原因有三：
-
view-transition-name只在当前 document 生效，新页面的 DOM 是全新加载的，旧页面的命名节点无法跨文档匹配 - MPA 导航（如点击
<a href="/detail"></a>）默认不触发 View Transition，除非显式拦截并调用startViewTransition() - 卡片和详情页的 DOM 结构通常不满足“同级或嵌套”要求：一个在列表容器里，另一个在全新
<main></main>中，浏览器无法建立像素级映射关系
正确做法：把“跨页面”变成“同页面双态”
放弃跳转到新 HTML 页面的思路，改用单页内切换视觉状态。核心是让缩略图和全屏视图共存于同一 DOM 树中，并共享稳定的 view-transition-name 值。
- 用一个包裹容器（如
<div class="card-container">），内部同时存在 <code>.card（默认显示）和.detail-view（display: none或aria-hidden="true"） - 两张图片都设置相同的
style="view-transition-name: hero-image"，且确保该值大小写完全一致、不带动态 ID 后缀 - 切换时调用
document.startViewTransition(() => { cardEl.hidden = true; detailEl.hidden = false; })，DOM 更新必须同步完成 - CSS 中定义：
::view-transition-old(hero-image) { animation: slide-up 0.4s ease-out; }和::view-transition-new(hero-image) { animation: scale-in 0.4s ease-in; } - 两个页面必须同源、使用相同
<meta name="view-transition" content="same-origin-allow-cross-document">（尚未标准化，属实验性） - 目标页面 HTML 中对应元素必须提前声明
view-transition-name，且与来源页完全一致 - 导航必须由用户手势触发（如 click），且不能被
preventDefault()中断整个流程 - 实际项目中极少稳定可用，多数情况会回退为淡入淡出，不建议依赖
MPA 场景下模拟共享元素的唯一可行路径
若必须保留真实页面跳转（例如 SEO 或服务端渲染需求），只能靠浏览器原生的 @view-transition 规则 + 服务端配合，但目前仅 Chrome 111+ 支持，且限制极严：
最易落地、兼容性最好、效果最可控的方式，始终是把“页面跳转”重构为“组件状态切换”——View Transitions 不是给路由加动画的胶水，而是为 DOM 状态变更拍快照的相机。只要旧节点和新节点都在同一时刻存在于 document 中，且命名精确匹配，共享元素动画就自然成立。其他所有绕开这个前提的设计，都会在某个浏览器版本或某种 DOM 更新节奏下突然失效。
