用 max-height 做下拉动画比 height 更可行，因 height 从 0 到 auto 无法过渡，而 max-height 是可动画数值属性，配合 overflow: hidden 即可实现平滑展开收起。
为什么用 max-height 做下拉动画比 height 更可行
直接对 height 从 0 到 auto 加 transition 是无效的——浏览器无法计算 auto 的终点值，动画会直接跳变。而 max-height 是可动画的数值属性，只要设一个“足够大但不过分夸张”的上限值（比如 500px），就能让过渡自然发生。
关键点在于：这个值必须大于菜单所有可能内容的高度，否则动画会提前截断；但也不能设成 10000px 这类魔数，否则在内容很短时，动画时间会明显拉长（因为要从 0 过渡到 10000）。
-
max-height: 0时，配合overflow: hidden才能真正隐藏内容 - 展开状态建议用
max-height: 400px（适用于多数导航项+2~3层子菜单） - 如果子菜单动态加载或高度差异极大，纯 CSS 方案就容易失守，得切回 JS 测高
overflow: hidden 必须和 max-height 成对出现
只设 max-height: 0 而不加 overflow: hidden，内容依然会溢出显示——这是最常被忽略的组合错误。反过来，如果只写 overflow: hidden 不控制高度，菜单根本不会“收起”。
还要注意：父容器不能有 overflow: visible（比如某些重置样式里会设 body 或 ul 为 visible），否则子元素的 hidden 会被穿透。
- 展开时也要保留
overflow: hidden，否则滚动条可能意外出现 - 如果菜单里有
position: absolute的子项（如箭头、徽标），它们不受max-height和overflow约束，需额外用visibility: hidden或opacity: 0配合过渡
transition 写在哪一层？别写在 :hover 上
把 transition: max-height 0.3s ease 直接写在 :hover 伪类里，会导致鼠标移入时有动画，但移出时立刻消失——因为移出后规则失效，transition 属性丢失。正确做法是把 transition 放在常态选择器上（比如 .dropdown-menu）。
另外，不要给 overflow 加 transition（它本身不可动画），也不要用 all 0.3s，容易触发意料外的重绘。
- 推荐写法：
.dropdown-menu { max-height: 0; overflow: hidden; transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1); } - 展开态用类名控制（如
.is-open），比纯 :hover 更可控，也支持键盘焦点展开 - cubic-bezier(0.4, 0, 0.2, 1) 比默认 ease 更适合菜单：起始稍缓、结束带点弹性，视觉更轻盈
移动端点击展开时，max-height 动画常卡顿的原因
在 iOS Safari 或部分安卓 WebView 中，max-height 动画可能掉帧，尤其当菜单内含图片、字体图标或复杂排版时。这不是代码错，而是浏览器对该属性的硬件加速支持弱于 transform 或 opacity。
如果性能敏感，可降级处理：保留 max-height 的逻辑，但动画阶段叠加 transform: scaleY(1) + opacity: 1，用 will-change 提前提示渲染层：
.dropdown-menu.is-open {
max-height: 400px;
transform: scaleY(1);
opacity: 1;
will-change: transform, opacity;
}
但注意：will-change 不要滥用，只在真正需要动画的元素上加；且 scaleY 需配合 transform-origin: top，否则会从中心缩放。
真正难搞的是超长列表或嵌套多层菜单——这时 max-height 已经不是瓶颈，DOM 渲染压力才是。该懒加载就懒加载，该用虚拟滚动就别硬撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
