max-height过渡比height过渡更可靠，因height无法从0过渡到auto，而max-height可用足够大的固定值实现平滑动画；需JS动态测量真实高度并配合will-change、setTimeout等确保流畅性与兼容性。
max-height 过渡为什么比 height 过渡更可靠
因为 height 从 0 到 auto 无法触发 CSS 过渡——浏览器压根不知道 auto 对应的具体像素值，过渡直接跳变。max-height 是 workaround：只要设一个“明显大于内容实际高度”的固定值（比如 500px），浏览器就能算出过渡路径。
常见错误现象：max-height: 0; → max-height: auto; 依然没动画——auto 同样不参与过渡，必须用具体数值。
- 使用场景：下拉菜单、折叠面板、响应式导航栏
- 参数差异：
max-height值不能太小（否则裁剪内容），也不宜过大（过渡时间拉长、动画变“软”） - 性能影响：过大的
max-height（如1000px）会导致动画末尾明显减速，视觉上像“坠落”
如何动态适配不同菜单高度
硬写死 max-height: 400px 很脆弱：菜单项增减、字体缩放、行高变化都会让这个值失效。真正鲁棒的做法是用 JS 测量真实高度，再写入内联样式。
关键点不是“要不要 JS”，而是“JS 只负责初始化，后续纯 CSS 动画”。示例逻辑：
立即学习“前端免费学习笔记（深入）”；
const menu = document.querySelector('.dropdown-menu');
menu.style.maxHeight = '0';
// 触发重排，读取真实滚动高度
menu.style.maxHeight = menu.scrollHeight + 'px';
- 容易踩的坑：在
transition生效前就设置max-height，导致第一次展开无动画；务必先设0，再读scrollHeight，再赋值 - 兼容性影响：
scrollHeight在display: none元素上返回0，需确保元素已渲染且可见（比如用visibility: hidden; height: 0;替代display: none）
过渡卡顿或闪动的典型原因
动画不流畅，大概率不是 max-height 本身的问题，而是触发了不必要的重排或重绘。
- 常见错误现象：菜单展开瞬间内容“抖一下”、文字模糊半秒才清晰
- 原因 1：父容器有
overflow: hidden但未设will-change: max-height，导致浏览器来不及优化渲染管线 - 原因 2：菜单内图片或字体加载延迟，撑开高度后触发二次重排（此时
max-height已锁定，内容被裁剪） - 解决方案：给菜单加
will-change: max-height；确保关键资源（如图标字体）提前加载；避免在菜单里嵌套position: absolute且依赖父级尺寸的元素
移动端点击穿透与动画完成判断
在 iOS Safari 上，max-height 过渡结束时若立即绑定新事件或跳转，可能因动画未真正完成而误触底层元素（点击穿透）。CSS 的 transitionend 事件在这里不可靠——它可能在动画“视觉完成”前就触发。
- 使用场景：下拉菜单展开后，用户点击某项跳转；需确保动画完全结束再响应点击
- 实操建议：不用
transitionend，改用setTimeout延迟300ms（和transition-duration一致），更稳定 - 容易踩的坑：多个菜单共用同一套 JS 逻辑，但每个菜单
transition-duration不同，硬写死300ms会出错；应从getComputedStyle中读取实际值
真正麻烦的是高度计算和动画时序的耦合——测高度要等 DOM 渲染，动画完成要等帧刷新，这两件事谁先谁后，得靠经验卡住节奏。
