菜单展开收起体验差源于height: auto无法过渡，解决方案有三：1. 用max-height模拟，设足够大值并加transition；2. JS动态获取真实高度并设置height过渡；3. 用transform: scaleY() + opacity实现高性能动画，并补充will-change、可访问性等细节。
菜单展开收起体验差，往往是因为直接设置 height: 0 ↔ height: auto 无法触发 CSS transition —— 浏览器不支持对 auto 值做平滑过渡。解决核心是：**避免使用 height: auto，改用可计算的具体高度或替代方案**。
用 max-height 模拟 height 过渡
这是最常用、兼容性好且无需 JS 计算的方法。原理是利用 max-height 的数值变化可被过渡，只要设一个“明显大于内容实际高度”的上限值（如 500px），视觉上就等效于展开到 auto。
- 初始状态：
max-height: 0; overflow: hidden; - 展开状态：
max-height: 500px;（确保足够容纳所有子项） - 添加过渡：
transition: max-height 0.3s ease-in-out;
⚠️ 注意：若菜单内容动态变化（如文字变多、行数增加），需确保设定的 max-height 始终够用，否则会出现裁剪；也不宜过大（如设成 10000px），会影响动画缓动精度和性能。
JS 配合 getBoundingClientRect 动态获取高度
追求精准动画时，可在展开前用 JS 读取菜单真实高度，再设置为 height 并触发动画：
立即学习“前端免费学习笔记（深入）”；
- 点击展开时，先设
height: 0、overflow: hidden，强制重排 - 再读取
menu.scrollHeight或menu.getBoundingClientRect().height - 将该数值设为
height，并添加transition - 收起时反向操作：先设目标高度，过渡结束后再设
height: 0并清理内联样式
✅ 优点是动画完全贴合内容；❌ 缺点是需处理重排、异步时机（如用 requestAnimationFrame）、以及收起后清除样式的逻辑，稍复杂。
用 transform + opacity 替代 height 动画（轻量推荐）
如果对“高度伸缩”视觉要求不高，更推荐用 transform: scaleY() + opacity 实现更流畅的展开效果：
- 初始：
transform: scaleY(0); opacity: 0; transform-origin: top; - 展开：
transform: scaleY(1); opacity: 1; - 过渡：
transition: transform 0.25s ease-out, opacity 0.2s ease-out;
✅ 不触发重排，GPU 加速，性能极佳；✅ 兼容现代浏览器；✅ 代码简洁。缺点是缩放可能影响子元素内文字渲染（罕见），且不适用于需要精确留白或与其他元素对齐的布局。
别忘了辅助体验细节
光有动画还不够，提升真实体验还需：
- 加
will-change: transform;（对 transform 方案）或will-change: max-height;（对 max-height 方案），提示浏览器提前优化 - 收起完成时，及时移除
height或max-height内联样式，恢复为height: auto，避免影响响应式或 JS 获取尺寸 - 配合
aria-expanded和aria-hidden更新可访问性状态，让屏幕阅读器正确播报 - 移动端注意点击区域和 touch-delay，避免因动画卡顿导致误操作
