max-height过渡不生效的根本原因是浏览器无法对auto值做动画，必须用具体像素值；动态适配需JS读取scrollHeight并设内联样式，注意overflow配合及Safari的transform干扰问题。

max-height过渡为啥不生效？

直接写 transition: max-height 0.3s 但动画卡顿、跳变，甚至完全没反应——根本原因是 max-height 从 0 到 auto 无法过渡。浏览器不识别 auto 为可动画数值，它会直接跳到最终高度。

• 必须用具体像素值（比如 max-height: 200px）才能触发平滑过渡
• 如果菜单项高度不确定，得预估一个「足够大但不过分夸张」的值，比如 max-height: 500px
• 别设 max-height: 10000px，过大的值会让动画变慢（浏览器要插值计算更多中间帧）

如何让展开收起真正“自动适配”内容高度？

靠 JS 动态读取 scrollHeight 是唯一靠谱办法。CSS 自身做不到「根据内容自动过渡到准确高度」，必须在展开前把目标高度存进内联样式。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 点击展开时：先设 max-height: 0 → 强制重排 → 读取 element.scrollHeight → 设 max-height: ${height}px
• 收起时：设回 max-height: 0，等 transition 结束后移除内联样式或设 display: none 防止占位
• 注意：别在 transitionend 里直接设 max-height: auto，那会破坏下一阶段展开逻辑

transition-duration 和 overflow 配合要点

动画过程中若内容被截断或出现滚动条，大概率是 overflow 没配对，或者过渡时间与高度不匹配。

• 初始状态（收起）必须设 overflow: hidden，否则内容会溢出显示
• 展开中保持 overflow: hidden，直到动画结束再切回 overflow: visible（否则鼠标悬停可能触发意外滚动）
• 如果菜单项含图片或字体加载延迟，scrollHeight 可能读小了，建议加 setTimeout 延迟 10ms 再读，或监听 load 事件

移动端 Safari 的隐藏坑：transform 会干扰 height 计算

如果菜单父容器用了 transform: translateZ(0) 或 will-change: transform，iOS Safari 下 scrollHeight 可能返回 0 或错误值，导致展开后高度塌陷。

• 临时方案：展开前移除该 transform，动画结束后再加回（需用 class 控制）
• 更稳做法：避免对菜单容器本身加硬件加速，改用父级 wrapper 承载 transform
• 验证方式：在 Safari 开发者工具里手动删掉 transform，看 scrollHeight 是否恢复正常

实际最麻烦的从来不是写几行 CSS，而是 scrollHeight 在不同渲染时机下返回的值不一致，还有 Safari 对布局触发时机的特殊处理——这些没法靠查文档解决，得真正在真机上点开、收起、反复刷新才看得见。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！