CSS transition 不生效？检查是否写在初始状态上

CSS transition 失效往往不是代码没写，而是写错了地方——必须将 transition 声明在元素的初始默认样式中，而非 hover 或 active 等伪类里；同时要确保过渡的是浏览器支持插值的属性（如 color、transform、opacity），避开 display、height: auto 等不可过渡的“雷区”，并注意多处声明时的覆盖规则和 JS 操作中可能因渲染优化而跳过动画的问题——真正让 transition 动起来的关键，在于“变化前已就位、变化本身可计算、浏览器明确能感知”。

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 的状态」发起变化，且变化目标必须是浏览器能插值的属性。

以上就是《CSS transition 不生效？检查是否写在初始状态上》的详细内容，更多关于的资料请关注golang学习网公众号！