17370845950

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 工具类）可能静默覆盖

transition 是否生效，关键不在“有没有写”，而在“写在哪”“变的是什么”“浏览器认不认”。最容易忽略的是：过渡必须由「已声明 transition 的状态」发起变化，且变化目标必须是浏览器能插值的属性。