用 max-height 配合 transition 实现菜单展开收起：默认 max-height 为 0，隐藏内容；添加 active 类时设为较大值（如 500px），配合 overflow: hidden 和过渡动画，使高度变化平滑，解决 height: auto 无法过渡的问题。通过 JS 切换类控制状态，实现自然动效，兼容性好且易于实现。
想让菜单展开收起更自然，用 max-height 配合 transition 是个简单又实用的方法。直接设置 height 的过渡往往无效，因为 height: auto 无法被平滑过渡。而 max-height 可以设置具体数值并参与动画，因此常被用来模拟“从无到有”的展开效果。
基本原理：用 max-height 模拟动态高度
核心思路是给菜单容器设置一个较大的 max-height 值来“容纳”内容，再通过 CSS 类控制其变化：
- 默认状态：max-height 设为 0，隐藏菜单
- 展开状态：max-height 设为足够大的值（如 500px），显示内容
- 配合 transition 实现高度变化的动画
注意：不能使用 height: auto 过渡，但可以利用 max-height 的数值变化产生视觉上的“展开”感。
HTML 结构示例
一个简单的下拉菜单结构：
立即学习“前端免费学习笔记（深入）”；
CSS 样式实现
关键样式如下：
.dropdown {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: #f8f8f8;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown.active {
max-height: 500px; / 足够容纳所有菜单项 /
}
- overflow: hidden 确保内容在 max-height 限制下被裁剪
- transition 定义了 max-height 变化的动画时长和缓动效果
- active 类切换时触发展开/收起
JavaScript 控制展开收起
通过 JS 切换 active 类：
const btn = document.querySelector('.toggle-btn');
const dropdown = document.getElementById('dropdown');
btn.addEventListener('click', () => {
dropdown.classList.toggle('active');
});
点击按钮时，dropdown 元素会在 max-height: 0 和 max-height: 500px 之间切换，实现平滑过渡。
基本上就这些。只要选对属性、合理设置 max-height 数值，并配合 transition，就能做出流畅的菜单展开效果。虽然不是真正基于内容高度的动画，但在大多数场景下完全够用且兼容性好。
