使用max-height结合transition实现折叠菜单动画，通过切换expanded类控制max-height从0到300px变化，配合overflow:hidden实现平滑展开收起效果。
使用 CSS transition 制作折叠菜单动画，关键是控制元素的高度或 max-height 配合过渡效果，实现平滑展开与收起。下面介绍一种常见且实用的做法。
1. 使用 max-height 实现可动画的高度变化
直接对 height: auto 做 transition 是无效的，因为 auto 不是一个具体数值。解决方法是使用 max-height 来模拟高度变化。
基本思路：
- 默认状态：设置较小的 max-height（如 0）并隐藏溢出内容（overflow: hidden）
- 展开状态：设置足够大的 max-height（如 500px），确保能容纳所有子内容
- 通过类名切换触发 transition
.menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.menu.expanded {
max-height: 500px;
}
2. HTML 结构与 JavaScript 控制
菜单结构通常包含一个按钮和一个下拉容器：
立即学习“前端免费学习笔记（深入）”；
用 JavaScript 切换类名：
function toggleMenu() {
const menu = document.getElementById('menu');
menu.classList.toggle('expanded');
}
3. 优化体验的小技巧
让动画更自然，可以注意以下几点：
- max-height 设置合理值：不能太小导致内容被裁剪，也不能太大影响性能（比如设成 9999px 可能造成卡顿）
- 使用 ease-in-out 曲线：比 linear 更顺滑
-
添加 will-change 提升性能（可选）：
will-change: max-height; - 配合 opacity 或 transform 增加视觉层次（例如淡入淡出）
4. 完整示例代码
基本上就这些。关键在于理解 max-height + overflow + transition 的组合用法，避免尝试对 height: auto 做动画。这种方式兼容性好，无需 JS 计算高度，适合大多数折叠菜单场景。
