直接 transition height auto 不生效，因为 auto 非具体数值，浏览器无法计算过渡中间帧；应改用 max-height 过渡或 CSS Grid 的 grid-template-rows 配合 fr 单位实现平滑展开。
为什么直接 transition height auto 不生效
因为 auto 不是具体数值，浏览器无法计算起始和结束之间的中间帧。你写 transition: height 0.3s，但从 height: 0 到 height: auto，浏览器根本不知道“auto”到底该是多少像素，过渡就直接跳变。
常见错误现象：点击展开按钮，内容瞬间弹出，没有动画；或者干脆不动，控制台也没报错——纯属 CSS 逻辑失效。
- 别用
height: auto做过渡终点，哪怕只在 JS 里临时读取了 offsetHeight 也别硬塞进 CSS 动画 - 如果盒子内容高度变化频繁（比如用户输入、异步加载），手动设死
height值不可靠，容易截断或留白 -
max-height是最常用替代方案，但它依赖一个「足够大又不过大」的上限值
用 max-height 实现平滑展开的实操要点
核心思路：用 max-height 代替 height 过渡，因为它是可计算的数值，且允许设为远大于实际内容的高度（如 1000px），视觉上等效于 auto。
使用场景：折叠面板、下拉菜单、表单错误提示、响应式侧边栏等固定结构、内容高度相对可控的组件。
立即学习“前端免费学习笔记（深入）”；
- 起点设
max-height: 0+overflow: hidden，确保收起时完全不可见 - 终点设
max-height: 600px（推荐 500–1000px 区间），别用100%或fit-content——它们不触发过渡 - 过渡必须写全：
transition: max-height 0.3s ease-in-out, opacity 0.2s，避免只写max-height导致其他属性突变 - 如果内容极少（比如一行文字），
max-height: 600px会导致动画过长；可按内容预估，例如短文本用24px × 3 = 72px，再加点余量
Grid 布局实现无高度预设的展开动画
当内容高度完全不可预测（如富文本、动态列表），max-height 的魔法数字会变成维护噩梦。此时用 CSS Grid 的 grid-template-rows 配合 minmax() 和 auto，能真正响应内容变化并支持过渡。
限制条件：父容器必须是 display: grid，且目标区域是其中一行（grid-row）；不适用于浮动或 inline 元素。
- 初始状态：
grid-template-rows: [header] auto [content] 0fr [footer] auto，用0fr把内容行高度压为 0 - 展开时：改为
grid-template-rows: [header] auto [content] 1fr [footer] auto，1fr会分配剩余空间，配合transition: grid-template-rows 0.3s即可平滑拉伸 - 注意
0fr≠0px，它表示「零份空间」，但依然保留布局流；若需彻底隐藏，得额外加overflow: hidden - 兼容性：Chrome 66+、Firefox 63+、Safari 16.4+ 支持
fr单位过渡；旧版 Safari 需降级到max-height方案
容易被忽略的细节和边界问题
动画是否自然，往往卡在几个不起眼的地方：padding/margin 变化没参与过渡、字体加载导致重排、JS 触发时机不对、甚至父元素 overflow 截断了动画过程。
- 如果盒子有
padding，记得一起过渡：transition: max-height 0.3s, padding 0.3s，否则 padding 会突变，显得生硬 - 不要在
display: none的元素上直接加过渡——它不参与渲染，所有 transition 都无效；改用visibility: hidden+opacity: 0组合 - JS 控制时，避免在添加 class 后立刻读取 offsetHeight；要等 reflow 完成，可用
getComputedStyle或requestAnimationFrame包一层 - 移动端键盘弹出、横竖屏切换可能触发意外 resize，导致
max-height值不再匹配，这时候 Grid 方案更稳
真正麻烦的从来不是“怎么动起来”，而是“动得刚好”——高度估算偏差 20px，动画就假；padding 少过渡一个属性，体验就割裂；这些地方不试几次根本看不出问题。
