transition失效的根本原因是浏览器未获取到明确的起始值或过渡声明未持续存在；需在基础样式中显式定义初始值和transition，避免写入:hover等伪类，禁用transition: all，js操作时保持过渡类始终生效。
transition写对了但第一次不触发动画
根本原因是浏览器没拿到「起始值」，过渡需要明确的起点和终点才能插值。比如给left加transition: left 0.3s，但元素初始样式里压根没声明left（值为auto），那第一次从auto→100px就无法计算中间帧，直接跳变。
常见表现：鼠标悬停或JS切换class后，第一次动是瞬移，第二次才正常过渡。
- 必须在基础选择器中显式写出初始值，例如
.box { left: 0; transition: left 0.3s; } - 避免依赖继承或默认值，
top/left/width等属性尤其容易踩坑 - 用 DevTools 的 Computed 面板确认该属性当前值不是
auto或initial
:hover里写了transition却只单向生效
过渡只在悬停时有动画、移出时却“啪”一下回弹，说明transition被错误地写进了:hover规则里。浏览器只在:hover激活时才有过渡定义，一旦离开，过渡上下文就丢失了。
- ✅ 正确写法：
.btn { transition: opacity 0.2s; }+.btn:hover { opacity: 0.7; } - ❌ 错误写法：
.btn { opacity: 1; }+.btn:hover { opacity: 0.7; transition: opacity 0.2s; } - 检查 Elements → Computed 中
transition-property是否始终存在，而不是只在:hover下出现
transition-duration设了却不走缓动曲线
ease、cubic-bezier()看起来和linear没区别？大概率不是语法错，而是变化幅度太小或时间太短，人眼分辨不出差异。
- 先拉长
transition-duration到2s，确认动画是否真正触发 - 检查
transition-timing-function是否被更高优先级规则覆盖（比如全局重置CSS里写了* { transition-timing-function: linear !important; }） - 避免用
transition: all 0.3s ease——如果某个属性不支持过渡（如display），整个声明不会报错，但该属性仍无效果
JS动态改class后transition完全失效
用classList.remove()删掉带transition的类，再add()另一个纯状态类，会导致过渡声明瞬间消失。浏览器失去参考基准，只能硬切终态。
- 把
transition抽出来，单独放在一个永不被移除的基础类里，例如.fade-el { transition: opacity 0.4s; } - 状态类只管值，不管过渡：
.fade-el--hidden { opacity: 0; }、.fade-el--shown { opacity: 1; } - 别在JS里直接写
el.style.opacity = '0'，这会覆盖CSS中的transition声明
最常被忽略的是：transition不是“一次性的开关”，它得一直在线。只要计算样式里transition-property变成none，哪怕只有一帧，动画就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
