CSS transition 对 height: auto 无效，因 auto 非具体数值无法插值；应改用 max-height 过渡或 JS 动态获取高度实现动画。
transition对height: auto根本不起作用
CSS 的 transition 无法在 height: auto 上产生过渡动画，因为浏览器无法计算 auto 对应的具体数值——它不是长度单位，而是一个布局计算结果。你设 height: 0 → height: auto，浏览器不知道“auto”到底等于多少像素，自然没法插值动画。
常见错误现象：height: 0; transition: height 0.3s; → 展开时瞬间弹出，收起时有过渡但展开没有。
- 只对固定数值（如
height: 0↔height: 200px）或max-height有效 -
height: auto只能在 JS 获取真实高度后手动设置，或换用其他可过渡的替代方案 - 别试图用
!important或重绘触发（如offsetHeight）绕过——它不解决根本问题
用max-height过渡模拟height: auto效果
这是最常用、兼容性好且无需 JS 的方案：用一个远大于内容实际高度的 max-height 值代替 height 过渡。
使用场景：下拉菜单、折叠面板、响应式侧边栏等需要“自动撑开”的动效。
立即学习“前端免费学习笔记（深入）”；
-
max-height必须设为具体数值（如max-height: 500px），不能是none或auto - 初始状态设
max-height: 0+overflow: hidden；展开时设为足够大的值（比如max-height: 500px） - 选值原则：要大于该元素可能的最大高度，但不宜过大（否则动画时间感知失真，比如设成
9999px会让 20px 高的内容也“慢悠悠”展开） - 注意：如果内容高度动态变化（比如文字被用户编辑），这个静态
max-height可能不够或过剩
details summary + div {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease-in-out;
}
details[open] summary + div {
max-height: 300px; /* 要预估够 */
}JS 动态获取高度 + CSS 过渡（精准但稍重）
当内容高度不可预估、或需要严格匹配 height: auto 行为时，必须靠 JS 先读取真实高度，再设置 height 并触发动画。
关键点在于：不能直接从 height: 0 → height: auto，而要走 height: 0 → height: [具体px] → 收起时再设回 height: 0。
- 展开前先临时取消
transition，设height: auto，读取offsetHeight，再恢复transition并设死该像素值 - 收起时设
height: [当前高度]px→ 下一帧再设height: 0（可用requestAnimationFrame或setTimeout(..., 0)） - 记得动画结束后清理内联
height，否则影响后续 JS 计算 - 避免在
display: none元素上读高度——得保证元素已渲染且可见（哪怕visibility: hidden+position: absolute也可）
为什么不要用transform: scaleY(0)替代
transform: scaleY(0) 看似能“隐藏+动画”，但它只是视觉缩放，元素仍占文档流空间，且无法配合 overflow: hidden 完全裁剪内容（尤其是带 border/padding 的子元素会露出来）。
更严重的是：它和 height 过渡解决的是不同问题——scaleY 是形变动画，不改变盒模型尺寸，所以无法解决因高度突变导致的页面跳动、兄弟元素重排等问题。
- 如果你的目标是“让下方内容平滑上移”，
scaleY无法做到——它只是把内容压扁了，父容器高度还是 0 或 auto - 与
max-height方案相比，scaleY在高 DPI 屏幕或字体抗锯齿开启时可能出现模糊或闪烁 - 无障碍支持差：屏幕阅读器仍会读取
scaleY(0)元素，而max-height: 0 + overflow: hidden更接近语义上的“隐藏”
过渡失效的根子不在写法多寡，而在没分清「布局属性」和「绘制属性」——height 是布局，transform 是绘制，浏览器优化策略完全不同。用错地方，再调 10 遍 ease-in-out 也没用。
