transition不生效的常见原因包括：display切换无法过渡；height: auto不可计算；visibility无中间帧；漏写属性名导致浏览器忽略；仅数值型属性如opacity、transform等支持过渡；需用DevTools验证声明是否被识别；替代方案有opacity+transform模拟隐藏、JS获取scrollHeight设固定height、max-height或scaleY(0)实现折叠效果。
transition 不生效的常见错误现象
页面上写了
transition: all 0.3s</p> <p>但改了 <code>display、
visibility 或 height（从 0 到 auto），动画完全没反应——这不是 bug，是 CSS 过渡机制本身不支持这些属性或值。
-
display切换（如none↔block）永远无法过渡，浏览器直接跳变 -
height: auto不能参与过渡，因为auto不是可计算的长度值 -
visibility虽然可过渡，但只有visible/hidden两种状态，没有中间帧，看起来仍是“闪现” - 写成了
transition: 0.3s（漏掉属性名），部分浏览器会静默忽略
哪些 CSS 属性真正支持 transition
不是所有属性都能动。能过渡的必须满足两个条件：有明确的起始/结束数值、浏览器能插值计算。官方列表里明确支持的包括：
- 数值型属性：
opacity、transform、color、font-size、margin/padding（但不能含auto） -
transform是最安全的选择，支持translate、scale、rotate，性能好且不触发重排 -
width/height可以过渡，但前提是起始和结束值都是具体数值（比如100px→200px），不能含auto或百分比（某些场景下百分比可行，但依赖父容器稳定）
用 DevTools 快速验证 transition 是否被识别
别猜，直接看浏览器认没认你的声明：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板选中元素，右侧 Styles 标签页里找
transition或transition-property，确认它没被划掉（划掉 = 语法错误或不支持） - 鼠标悬停到该属性上，Chrome 会提示 “Transition will not be applied to
xxx”，点开就能看到具体哪个属性被忽略 - 修改值后，切到 Computed 标签页，搜
transition，看实际解析出的transition-property是什么（比如你写了all，但浏览器可能只列出opacity和transform） - 如果想观察过渡过程，勾选右上角 “Rendering” → “Paint flashing”，过渡中会高亮重绘区域；更关键的是打开 “Layers” 面板，确认触发过渡的属性是否提升为独立图层（尤其是
transform）
替代方案：当必须动 display/height/auto 时怎么办
硬要过渡不可过渡的属性，只能绕开限制：
- 代替
display：用opacity+transform: scale(0.95)模拟隐藏，过渡完再用 JavaScript 设置display: none - 代替
height: auto：先用 JS 获取目标高度（el.scrollHeight），设为height固定值，再过渡；收起时同理，过渡完再设回height: 0和overflow: hidden - 用
max-height做简易替代（比如设成远大于内容的值max-height: 500px），但要注意内容超长时会失真 - 更稳妥的做法是改用
transform: scaleY(0)控制显隐，配合transform-origin: top实现类似 height 折叠效果
真正容易被忽略的是：transition 生效的前提是属性值发生了「可检测的变化」。比如通过 class 切换触发，但新 class 的样式还没在下一帧渲染出来，JS 就立刻改了值——这时候需要 getComputedStyle(el).height 强制触发回流，或者用 requestAnimationFrame 错开时机。
