加了 view-transition-name 却没动画，是因为该属性仅在 document.startViewTransition 回调中修改元素（增删、显隐、属性变更）时才触发过渡；静态设置或未在回调中操作元素均无效。
直接用 view-transition-name CSS 属性命名元素，但仅当该元素在 document.startViewTransition 回调中被修改（增删、显隐、属性变更）时，才会真正参与过渡 —— 否则只是“挂名”，不触发任何动画。
为什么加了 view-transition-name 却没动画？
常见错误是把 view-transition-name 当成“开启动画开关”，其实它只是“标记身份”。浏览器只会在 startViewTransition 的回调执行期间，扫描 DOM 中哪些元素的 view-transition-name 值发生了变化（新增、删除、值变更），才为它们创建过渡图层。
- 静态写死在 HTML 或 CSS 里（如
<div style="view-transition-name: card">），但 JS 没调用startViewTransition→ 无动画 - 写了
startViewTransition，但回调里没动那个元素（比如只改了其他 DOM）→ 该元素不参与 - 元素在回调执行前已被移除或未插入文档 → 浏览器找不到目标节点，跳过
如何正确绑定 view-transition-name？
推荐在 JS 中动态设置 element.viewTransitionName，而非全靠 CSS 声明。这样能精准控制“本次过渡谁上场”，避免多个同名元素互相干扰。
- 不要在全局 CSS 里批量设
.card { view-transition-name: card; }，尤其当页面有多个卡片时 - 在
startViewTransition回调开始前，只给当前要过渡的元素赋值：targetElement.viewTransitionName = 'detail-card'; - 过渡结束后立即清空：
targetElement.viewTransitionName = '';，防止下次误参与 - 若需多个元素协同过渡（如标题+图片），确保它们 name 值不同（
'detail-title'和'detail-image'），否则会被合并为同一图层
::view-transition-old 和 ::view-transition-new 伪元素怎么匹配？
浏览器会自动为每个有非空 view-transition-name 的元素生成一对伪元素：::view-transition-old(name) 和 ::view-transition-new(name)。注意名称必须完全一致（区分大小写），且不能含空格或特殊字符。
立即学习“前端免费学习笔记（深入）”；
- 合法：
card-1,userAvatar,product_image - 非法：
card 1（空格）、card@2x（@ 符号）、1st-card（以数字开头，部分浏览器解析异常） - 匹配失败时，伪元素规则不会生效，动画回退到默认淡入淡出
- 调试技巧：在 DevTools 中检查元素 computed 样式，确认
view-transition-name是否已真实生效（不是继承或初始值）
容易被忽略的 stacking context 问题
每个设置了非空 view-transition-name 的元素，在过渡期间都会创建独立 stacking context。这意味着 z-index 不再跨元素生效，相邻过渡元素可能互相遮盖 —— 尤其当它们 DOM 位置接近、且都用了相同动画方向时。
这不是 bug，而是规范行为。解决方式不是调高 z-index，而是减少无关元素的命名：只让真正需要过渡的元素带 name，其余用普通 CSS 动画（transition）补足视觉连贯性。动态绑定 + 及时清理，比全局 CSS 声明更可控。
