transition必须写在初始状态而非伪类中，且仅对可过渡属性（如color、transform）生效；不可过渡属性（如display、height:auto）需用max-height等替代；多处声明时后写覆盖前写。
transition 必须写在「状态变化前」的元素上
很多情况下 transition 看似写了却没动画，根本原因是把它放在了 hover、active 等伪类里，而不是初始状态（即默认样式）中。浏览器只在属性值真正发生变化时触发动画，而如果 transition 是在变化后才声明的，它对本次变化无效。
- ✅ 正确：在默认样式中声明
transition: background-color 0.3s; - ❌ 错误：只在
a:hover { transition: background-color 0.3s; }里写 - hover 时背景色变了，但因为 transition 没在初始状态定义，第一次变化无过渡效果
检查是否修改了「不可过渡」的 CSS 属性
不是所有 CSS 属性都支持 transition。比如 display、height（当值为 auto 时）、position、z-index 等，要么无法插值，要么浏览器不支持过渡。
- 常见踩坑：
transition: height 0.3s;+height: auto;→ 不生效（auto无法计算中间值） - 替代方案：用
max-height或transform: scaleY()，或配合overflow: hidden - 可安全过渡的常用属性：
color、background-color、opacity、transform、margin、padding等
确认触发重绘的属性确实发生了变化
transition 只响应「计算值变化」。有些看似变化的操作其实不会触发重绘，比如：
- 仅修改
class但新 class 没改变任何可过渡属性 → 无动画 - JS 中连续设置同一属性（如先设
el.style.opacity = '0.5'，再设'1'），若未强制重排，浏览器可能合并为一次渲染 - 使用
getComputedStyle或读取offsetHeight可强制触发重排，让 transition 生效
el.style.opacity = '0.5'; // 强制重排，确保下一次变化能过渡 void el.offsetHeight; el.style.opacity = '1';
检查是否被其他样式或继承覆盖
transition 是简写属性，容易被后续声明覆盖。尤其注意：
立即学习“前端免费学习笔记（深入）”；
- 多个
transition声明时，后写的会完全覆盖前面的（不是叠加） - 父元素设置了
transition: all 0.2s;，子元素又写了transition: opacity 0.3s;→ 子元素只过渡 opacity - 检查 computed styles 面板里
transition-property的实际值，确认没被 reset 成none - 某些 CSS 重置库（如 normalize.css）或框架（如 Tailwind 的
!important工具类）可能静默覆盖
