用 max-height 配合 transition 实现菜单平滑展开，因 height: 0 → auto 不可动画，而 max-height 可设固定值（如 500px）触发过渡；需设 overflow: hidden 并合理预估高度避免卡顿。
菜单展开太突然，本质是高度从 0 直接跳到实际内容高度，浏览器无法插值动画。用 max-height 配合 transition 是最实用、兼容性好、无需 JS 的解决方案。
为什么不用 height 动画？
height: 0 → height: auto 无法过渡 —— auto 不是可计算数值，浏览器不知道中间状态。而 max-height 可设为一个“足够大但不过分”的固定值（如 500px），就能触发平滑过渡。
正确写法：max-height + transition
关键点：初始状态设 max-height: 0 和 overflow: hidden；展开时设一个略大于内容最大可能高度的值（比如 max-height: 500px），并添加过渡：
.menu-sub {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.menu-open .menu-sub {
max-height: 500px; /* 确保能容纳所有子项 */
}
避免常见坑
- 别设 max-height: 0 → max-height: 100vh：太大导致动画过长或卡顿，按实际内容预估（如最多 6 项 × 行高 ≈ 360px，就取 400px）
- 确保有 overflow: hidden：否则内容会溢出、遮挡其他元素
-
慎用 margin/padding 动画：若子项有上下间距，建议只对
.menu-sub做 max-height 过渡，内部 padding/margin 保持静态，或单独加轻微 delay 过渡 -
移动端注意重绘性能：避免在
max-height动画期间同时触发大量布局计算（如频繁 resize 或 font-size 变化）
进阶：更自然的收起体验
收起时若直接回到 max-height: 0，末尾可能“抽搐”一下。可加一点小技巧：
立即学习“前端免费学习笔记（深入）”；
- 用
transition-timing-function: ease-out收起，比展开稍快一点 - 收起完成后再用
setTimeout移除元素或清空内联样式（可选，非必须） - 或者用
@keyframes+transform: scaleY()替代（需包裹容器，适合固定结构）
基本上就这些。不复杂但容易忽略细节，调好 max-height 值和 timing，菜单就能稳稳地滑出来。
