根本原因是浏览器未获取到CSS属性的明确起始值，导致无法插值计算动画帧；必须在基础选择器中显式声明初始值（如left: 0），而非依赖auto、inherit或默认值。
transition写对了但第一次不触发动画
根本原因是浏览器没拿到「起始值」，过渡需要明确的起点和终点才能插值。比如给left加transition: left 0.3s，但元素初始样式里压根没声明left（值为auto），那第一次从auto→100px就无法计算中间帧，直接跳变。
用 DevTools 的 Computed 面板确认该属性当前值不是auto或initial；top/left/width等属性尤其容易踩坑。
- 必须在基础选择器中显式写出初始值，例如
.box { left: 0; transition: left 0.3s; } - 避免依赖继承或默认值，
margin、padding同理，不能靠父级或浏览器默认推断 - 如果用
flex或grid布局，justify-content这类对齐属性本身不可动画，要改用transform: translateX()模拟
:hover里写了transition却只单向生效
过渡只在悬停时有动画、移出时却“啪”一下回弹，说明transition被错误地写进了:hover规则里。浏览器只在:hover激活时才有过渡定义，一旦离开，过渡上下文就丢失了。
检查 Elements → Computed 中transition-property是否始终存在，而不是只在:hover下出现。
- ✅ 正确写法：
.btn { transition: opacity 0.2s; }+.btn:hover { opacity: 0.7; } - ❌ 错误写法：
.btn { opacity: 1; }+.btn:hover { opacity: 0.7; transition: opacity 0.2s; } - 伪类不是唯一陷阱——媒体查询内、Shadow DOM 中的
transition也必须在基础状态中声明
哪些CSS属性真正支持transition
不是所有属性都能过渡。display、height（从auto开始）、z-index、font-size（旧版 Safari）、visibility本身不支持插值，设了transition也无效。
即使transition: all 0.3s语法正确，只要其中任一属性不可动画，整条声明不会报错，但该属性静默失效。
- ✅ 安全可过渡：
opacity、transform、color、background-color、width/height（需明确数值，不能是auto） - ⚠️ 替代方案：用
opacity+visibility: hidden替代display: none；用transform: scaleY(0)替代height: 0 - 性能提示：
transform和opacity是唯二能稳定触发 GPU 加速的常用属性，其余大多走 CPU 绘制
JS切换class后transition完全失效
用classList.remove()删掉带transition的类，再add()另一个纯状态类，会导致过渡声明瞬间消失。浏览器失去参考基准，只能硬切终态。
关键不是 JS 写错了，而是transition本身不具备继承性，且仅在计算样式中存在时才生效。
- 把
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，所有状态类只改值，所有可动画属性都显式初始化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
