transition 属性必须写在元素的基础状态（如默认类）中，而非切换后的类里，否则无法触发过渡；应优先使用 opacity、transform 等硬件加速属性，避免 display、height 等触发布局的属性，并确保 transition 在初始渲染时即存在且未被覆盖。
transition 属性必须写在被切换的元素上，而不是类名里
很多人以为只要给两个类加 transition 就能动起来，结果鼠标一hover、一点击，样式变了但就是不过渡。根本原因是：CSS 过渡生效的前提是「同一个元素上，两个状态之间存在可动画的属性变化」，而 transition 必须定义在该元素的**基础状态（比如默认类或标签选择器）中**，否则浏览器压根不开启过渡监听。
常见错误写法：
.btn { background: #007bff; }<br>.btn.active { background: #0056b3; transition: background 0.3s; }这样写，
transition 只在 .active 生效时才存在，从无到有、再到无，无法触发过渡。
- 正确做法：把
transition写在基础类或元素本身上，例如.btn { transition: background 0.3s, color 0.2s; } - 如果用内联样式控制状态，记得
transition也得写在 style 里，且不能只靠 JS 动态加 —— 浏览器需要初始渲染时就看到它 - 支持过渡的属性有限，
display、height（从 0 到 auto）、font-size（带单位）等常被误用；优先用opacity、transform、background-color这类硬件加速友好且稳定支持的
class 切换太“快”，transition 来不及捕获
JS 立即添加又立即移除类（比如 toggleClass 后立刻再 remove），会导致浏览器来不及重绘，过渡直接跳过。这不是 bug，是渲染机制：样式变更后需触发 layout → paint → composite，中间若状态已变，过渡就被“截断”了。
- 避免在单次同步执行中反复操作 class，例如不要写
el.classList.add('fade'); el.classList.remove('fade'); - 需要“闪一下”效果？用
setTimeout(() => el.classList.remove('fade'), 10)或requestAnimationFrame延迟移除 - Vue/React 中注意响应式更新时机，
nextTick或useEffect的依赖数组漏写可能造成类似问题
transition-duration 为 0 或被 !important 覆盖
看似写了 transition: all 0.3s，但实际没动，大概率是值被覆盖了。开发者工具里经常能看到 transition-duration: 0s 显红 —— 那就是被更高优先级规则干掉了。
- 检查 computed 样式面板，确认
transition-property和transition-duration真实生效值 - 慎用
!important，尤其在框架组件里，它可能意外压制你自己的transition - 用
all不如明确列出要动的属性，比如transition: opacity 0.2s, transform 0.25s ease-out，避免all包含不可动画属性导致整条失效 - 某些 CSS 重置库（如 normalize.css）会设
transition: 0s，记得覆盖掉
transform 和 opacity 是最稳的过渡组合
如果你只关心“能不能平滑动”，别碰 width、height、margin 这些触发布局计算的属性。它们不仅慢，还容易在缩放、flex 容器里表现异常。
立即学习“前端免费学习笔记（深入）”；
- 位移用
transform: translateX(10px)，不是left: 10px - 显隐用
opacity: 0+visibility: hidden（后者用于防止交互），不是display: none - 想实现“展开收起”？用
max-height+overflow: hidden，但必须设具体数值（max-height: 0→max-height: 200px），auto不支持过渡 - 移动端要注意
will-change: transform在复杂动画中可提前提示合成层，但别滥用，会增加内存开销
真正卡住的地方，往往不是不会写 transition，而是没意识到浏览器渲染流水线里哪一步断了 —— 类名切得太急、属性选得不对、或者某个父级 overflow: hidden 意外裁掉了 transform 动画区域。
