transition 属性会被后声明的类完全覆盖，而非叠加；应统一收口到基础类中，用 transition-Property 精确控制可动画属性，避免 transition: all 和内联样式干扰触发时机。
transition 属性会被后声明的类覆盖
css 的 transition 不是“叠加生效”，而是完全被后续匹配的规则替换。哪怕只是改了一个时间，整个过渡声明都会被新值取代——包括你没写出来的 transition-property 或 transition-timing-function。
常见错误现象：hover 状态下动画变卡顿、突然跳变、或干脆不触发；排查发现两个类都写了 transition，但只生效了其中一个。
- 浏览器按 CSS 优先级和声明顺序决定最终值，同权重时后写的胜出
- 如果 A 类写
transition: background-color 0.3s;，B 类写transition: transform 0.2s ease-in;，那么 B 类生效时，background-color就彻底失去过渡效果 - 避免在多个类里分别写不完整
transition，统一收口到基础状态类中
用 transition-property 精确控制哪些属性可动画
盲目写 transition: all 0.3s; 是多数视觉错乱的源头。不是所有属性都适合过渡，比如 display、height（从 0 到 auto）、font-size 在某些字体下会抖动，而且 all 会让未来新增的样式意外进入动画流。
- 只列出真正需要过渡的属性：如
transition-property: opacity, transform, color; - 用
transition-property: none;主动关闭某个类里的动画，比留空更可靠 - 注意缩写陷阱：写
transition: opacity 0.3s, transform 0.3s;实际等价于transition-property: opacity, transform;，但若漏掉某一项，它不会继承上一个类的设置
transition-delay 在 hover + class 切换场景下的表现
当用户快速悬停又移出，或 js 动态增删类时，transition-delay 会让动画“卡住半拍”，尤其在取消动画时容易残留延迟等待，造成响应滞后感。
立即学习“前端免费学习笔记（深入）”；
使用场景：按钮悬停放大 + 文字颜色渐变，同时希望颜色先变、缩放稍晚一点出现。
-
transition-delay只影响动画开始时机，不影响结束；移出时仍按原transition-duration执行反向过渡 - 若用 JS 控制类切换，建议统一用
transition: none;临时禁用，操作完再恢复，避免 delay 累积 - 不同属性设不同 delay 时，必须拆成独立
transition声明（CSS 不支持单条声明里为不同属性设不同 delay）
JavaScript 修改样式后 transition 失效的典型原因
JS 直接改 element.style.transform = 'scale(1.2)'; 后，CSS :hover 或 class 切换可能不再触发动画——因为内联样式优先级高于外部类，且浏览器可能跳过重绘优化。
- 强制重排可修复：读取一次
offsetHeight或getComputedStyle(el).transform，再改样式 - 更稳妥的做法是只用 class 控制状态，JS 只负责增删类，把所有
transition都留在 CSS 里 - 注意：用
requestAnimationFrame包裹样式修改，能减少因渲染队列导致的过渡丢失
最麻烦的其实是 transition 触发时机本身依赖于“计算样式变化”，而这个过程对开发者不可见；一旦中间有 display 切换、visibility 隐藏、或父元素 transform 变化，都可能让过渡静默失败。