view-transition-name仅是元素标识，非动画开关；必须在document.startviewtransition()回调中同步修改该元素dom，浏览器才对比新旧快照生成::view-transition-old/new伪元素并触发过渡。
view-transition-name 只是标记，不是开关
加了 view-transition-name 却没动画，是因为这个属性本身不触发任何行为——它只是给元素打个“身份证”，后续是否参与过渡，完全取决于你**是否在 document.startViewTransition() 回调里动了它**。
常见错误是静态写完 view-transition-name: "logo" 就以为万事大吉，结果点击切换时毫无反应。浏览器根本不会扫描 DOM 主动找这些名字，它只在 startViewTransition 执行期间，对比“旧快照”和“新快照”中同名元素的变化（位置、尺寸、显隐等），才生成 ::view-transition-old("logo") 和 ::view-transition-new("logo") 伪元素。
- 必须用 JS 显式调用
document.startViewTransition(() => { /* 修改DOM */ }) - 修改必须是同步的：不能先 fetch 数据再更新，也不能靠 React 的 useEffect 异步渲染
- 命名必须完全一致：
"header"和'header'（引号不同）或大小写差异都会匹配失败
::view-transition-old/new 伪元素无法继承父样式
::view-transition-old("xxx") 和 ::view-transition-new("xxx") 是浏览器在内存快照中临时生成的独立伪元素，它们**不继承宿主元素的任何样式**，包括 font-size、color、transform，甚至 display。
这意味着你不能指望 .logo { transform: scale(1.2); } 会自动应用到 ::view-transition-old("logo") 上。所有动画控制都得单独写在这两个伪元素规则里：
- 必须显式设置
content: ""（虽然文档没提，但实测漏写会导致 Safari 下不渲染） - 必须声明
position: fixed或absolute，否则默认static会破坏定位基准 - 所有尺寸、颜色、变换都要重写，例如：
::view-transition-old("logo") { background-color: #007bff; transform: rotate(-5deg); } - 不能写组合选择器，如
.theme-dark ::view-transition-new("logo")—— 浏览器直接忽略
动画卡在“旧”状态不动，可能因为 transition 写错了位置
View Transitions 的动画本质仍是 CSS transition 或 @keyframes，但它的触发时机和作用域非常特殊：它只对 ::view-transition-old/new 伪元素生效，且必须在它们的规则块内声明。
常见失效场景：
- 把
transition: transform 0.4s写在宿主元素上 → 完全无效，伪元素不继承 - 只写了
::view-transition-old("logo") { transform: translateX(0); }，但没写初始态 → 浏览器无起点，直接跳变 - 用了不可过渡属性，比如
transition: display 0.3s或transition: width 0.3s（当原始值是auto）→ 静默失败 - 动画时间太短（
0.05s）或缓动函数太陡（cubic-bezier(0,0,0,1)）→ 视觉上像没动
页面刷新后首次过渡失败，大概率是 DOM 更新时机问题
View Transitions API 要求“旧快照”和“新快照”之间只能有**一次同步 DOM 更新**。如果框架（如 Vue/React）或手写 JS 在 startViewTransition 回调外又触发了一次重排（比如 el.offsetWidth 强制重排，或异步 setState），浏览器会抛 InvalidStateError，整个过渡静默降级为硬切。
调试建议：
- 用 DevTools 的 Rendering 面板勾选 “Paint Flashing”，确认过渡期间是否有多余重绘
- 检查控制台是否有
Uncaught InvalidStateError报错 - 避免在回调里读取布局信息（
getBoundingClientRect()、offsetHeight等），除非你明确需要并做了防抖 - 纯 CSS 切换（如 classList.toggle）最稳；若需 JS 计算，确保所有 DOM 操作都在回调内完成且无中间状态
最隐蔽的坑是：你以为动画没生效，其实它生效了，只是旧伪元素被新内容遮住、或 z-index 错位导致看不见——务必临时加 border: 2px solid red 和 z-index: 9999 去验证伪元素是否真实存在并按预期移动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
