View Transitions API仅对单页内同步DOM更新生效，不支持location.href或a标签跳转；必须用document.startViewTransition()包裹同步DOM变更，且view-transition-name须成对、稳定、大小写敏感并确保元素已挂载。
View Transitions API 不是“给跳转加动画”的开关，它只对单页内同步 DOM 更新生效；直接 location.href 或点击 <a href> 会卸载文档，快照拍不到，动画必然失败。
document.startViewTransition() 必须包裹同步 DOM 更新，不能包导航逻辑
它不是路由钩子，而是告诉浏览器：“接下来我要改 DOM，请立刻拍旧快照 → 执行更新 → 拍新快照 → 补间”。一旦混入异步操作，快照就错位。
- ✅ 正确：
document.startViewTransition(() => { main.innerHTML = newHTML; history.pushState({}, '', url); }) - ❌ 错误：
document.startViewTransition(() => { router.push('/detail'); })—— 这没改 DOM，只是发指令 - ⚠️ 危险：
document.startViewTransition(async () => { const html = await fetch(...); main.innerHTML = html; })—— 异步导致快照提前结束 - 框架用户注意：Vue 用
nextTick、React 用flushSync确保 DOM 已真实更新后再进回调
view-transition-name 配对失败是“没动画”的最常见原因
90% 的静默失败源于这个属性没对上——它大小写敏感、不可空格、不能动态拼接，且要求元素已挂载。
- 旧节点和新节点都得有完全一致的
style="view-transition-name: title"（连引号都不能多一个） - 禁止写成
view-transition-name: item-${id}，前后id只要不同，匹配即失败 - 刚
createElement但还没append到 document 的节点，不会被拍进快照 - 非目标元素别乱加该属性，否则会被卷入过渡，干扰图层和动效节奏
::view-transition-old 和 ::view-transition-new 的样式陷阱
浏览器把旧/新视图渲染为独立合成层，但很多 CSS 会让旧元素“不可绘制”，快照就为空。
立即学习“前端免费学习笔记（深入）”；
- ❌ 禁止在快照前设
display: none、visibility: hidden或opacity: 0 - ✅ 可用
opacity: 0.001占位，或叠加backdrop-filter: blur(2px)模拟遮罩 - 自定义动画时，务必统一
animation-duration；否则旧层早消失、新层晚入场，出现空白帧 - 调试时打开 DevTools 的 Layers 面板，确认目标元素进了带 “View Transition” 标签的合成层
真正卡住人的地方不在 CSS 动画怎么写，而在于 DOM 更新是否同步、view-transition-name 是否稳定成对、旧元素是否始终可绘制——三者缺一，动画就断。别指望它自动适配 SSR 首屏或跨页面跳转，那根本不在它的设计范围内。
