max-height能动画而height: auto不能，因浏览器只对确定数值插值；max-height设为0→500px等具体像素值可线性过渡，且只要不小于内容实际高度即完整显示，配合overflow: hidden即可实现平滑展开收起。
不能直接对 height: auto 做 transition，但用 max-height 模拟是目前最稳定、兼容性最好、无需 JS 测量的方案。
为什么 max-height 能动，而 height: auto 不能
浏览器过渡引擎只认「可插值的确定数值」。height: auto 不是数值，是布局计算结果；max-height 却可以设成 0、100px、9999px 这类明确像素值，因此能线性插值生成中间帧。
关键点在于：max-height 不是“限制高度”，而是“允许撑开的最大上限”——只要内容实际高度 ≤ 该值，它就完全显示；超过则裁剪。所以设得足够大（比如 500px 或 9999px），视觉上就等效于 height: auto。
max-height 动画的典型写法与参数陷阱
常见错误是把 max-height: 0 → max-height: 9999px 当成万能解，结果动画卡顿或收不干净：
立即学习“前端免费学习笔记（深入）”；
-
max-height: 0时必须配overflow: hidden，否则内容会溢出并撑高父容器 - 起始值别用
max-height: 0：某些字体渲染下，0px 会导致子元素 margin 折叠异常，建议用max-height: 0.01px或max-height: 1em - 目标值别盲目堆大数字：设
9999px在 Safari 下可能触发重排抖动；推荐按业务预估最大行数 × 行高（如6em、120px） - 必须同时过渡
opacity：否则展开瞬间文字先闪现再拉升，破坏连贯感
如何避免内容超长被意外裁剪
如果内容高度真可能超过你设的 max-height（比如用户粘贴了超长文本），动画会中途截断。解决方法有二：
- 用 JS 动态写入真实高度：
el.style.maxHeight = el.scrollHeight + 'px'，再加transitionend清除内联样式，保证下次还能复用 CSS 类 - 改用
grid-template-rows: 0fr→1fr方案（Chrome 66+/Firefox 70+/Safari 16.4+ 支持）：它不依赖预设数值，真正语义化支持 0 ↔ auto，但要求父容器是display: grid且仅控制单行
transition 时间和缓动函数怎么选
太短（0.1s）像抽搐，太长（0.6s）显迟滞。实测下来：
- 纯文本展开：推荐
transition: max-height 0.25s ease-out, opacity 0.25s ease-out - 含图片或 iframe 的区域：拉长到
0.35s，避免因资源加载延迟导致动画“卡半截” - 千万别写
transition: all 0.3s：万一未来加了border-color或box-shadow，会意外触发多余动画
真正难的是平衡「通用性」和「精确性」：预设 max-height 简单但怕超长；JS 测量准确但要处理异步渲染时机。多数项目用前者就够了，只有内容高度完全不可控时，才值得上后者。
