view transitions api 仅支持同一文档内同步 dom 更新的过渡，无法用于跨页面导航；其根本限制在于导航会卸载旧文档，导致快照失败、动画消失，且旧元素需可绘制、name 成对稳定、dom 更新同步才能可靠生效。
View Transitions API 无法实现跨页面的平滑元素过渡。 它只对同一 HTML 文档内的同步 DOM 更新生效；点击 a 标签跳转或赋值 location.href 会卸载当前文档，导致快照失败、动画消失——这不是配置问题，是根本性限制。
为什么 document.startViewTransition() 在跳转时没反应
浏览器在导航触发瞬间就销毁旧文档上下文，document.startViewTransition() 的调用时机和实际 DOM 替换完全脱节。常见现象包括：
- 控制台无报错，但页面硬切换
- 仅部分元素闪动，主体内容无过渡
- 动画只在 SPA 内部路由变化时出现
根本原因：新页面加载时，旧文档已不存在，浏览器连“旧快照”都拍不到。
SPA 中正确触发元素级命名过渡的写法
必须确保 view-transition-name 成对、稳定、大小写敏感，且对应元素在快照前已挂载到 document。典型错误包括：
-
view-transition-name: item-${id}动态拼接 → 前后值不一致导致匹配失败 - 元素刚
createElement就调用startViewTransition，但尚未append→ 不参与快照 - 给隐藏元素设
display: none或visibility: hidden→ 快照为空，动画失效
✅ 正确示例（Vue 场景）：
onMounted(() => {
nextTick(() => {
document.startViewTransition(() => {
// 同步更新 DOM，确保元素已渲染并挂载
main.innerHTML = renderDetailPage();
});
});
});
::view-transition-old 和 ::view-transition-new 的样式陷阱
浏览器将旧/新视图分别渲染为独立合成层，但很多 CSS 会让旧元素“不可绘制”，从而中断动画：
- 禁止在快照前设
opacity: 0、display: none、visibility: hidden - 可用
opacity: 0.001占位，或配合backdrop-filter模拟遮罩 - 务必统一
animation-duration，否则旧层早消失、新层晚入场，出现空白帧 - 调试时打开 DevTools Layers 面板，确认目标元素进了带 “View Transition” 标签的合成层
真正起效的关键不在 CSS 动画写得多炫，而在于 DOM 更新是否同步、view-transition-name 是否稳定成对、旧元素是否始终处于可绘制状态——这三点漏掉任一，动画就不可靠。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
