使用max-height和transition实现菜单折叠动画，通过设置max-height从0到足够大值的过渡，配合overflow:hidden实现平滑展开收起效果。
实现导航菜单的折叠动画，关键在于让菜单在展开和收起时有平滑的过渡效果。使用 CSS 的 animation 或 transition 配合 height 或 max-height 可以轻松实现这一效果。虽然不能直接对 height: auto 做过渡，但通过一些技巧可以绕过这个限制。
使用 max-height 实现渐进式展开动画
由于无法对 height: auto 添加 transition，一个常见做法是使用 max-height 来模拟动态高度。
基本思路是：将元素的 max-height 从 0 过渡到一个足够大的值（如 500px），从而实现“看起来”像自动适应高度的动画效果。
- 初始状态设置
max-height: 0; overflow: hidden; - 展开状态设置
max-height: 500px;（需大于菜单最大可能高度） - 添加
transition控制动画时长和缓动函数
示例代码：
立即学习“前端免费学习笔记（深入）”；
.nav-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.nav-menu.expanded {
max-height: 500px;
}
HTML 结构示例：
<button onclick="toggleMenu()">切换菜单</button>
<nav id="menu" class="nav-menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
<script>
function toggleMenu() {
const menu = document.getElementById('menu');
menu.classList.toggle('expanded');
}
</script>
使用 CSS animation 制作更精细的展开效果
如果需要更复杂的动画控制（比如配合 opacity、transform），可以使用 @keyframes 定义动画。
这种方式适合做组合动画，例如：高度展开的同时淡入。
@keyframes slideDown {
from {
max-height: 0;
opacity: 0;
}
to {
max-height: 500px;
opacity: 1;
}
}
@keyframes slideUp {
from {
max-height: 500px;
opacity: 1;
}
to {
max-height: 0;
opacity: 0;
}
}
.nav-menu.animated {
overflow: hidden;
opacity: 1;
}
.nav-menu.expand {
animation: slideDown 0.3s forwards;
}
.nav-menu.collapse {
animation: slideUp 0.3s forwards;
}
JavaScript 控制动画类名切换：
function animateMenu(expand) {
const menu = document.getElementById('menu');
menu.classList.remove('expand', 'collapse');
if (expand) {
menu.classList.add('expand');
} else {
menu.classList.add('collapse');
}
}
注意事项与优化建议
虽然 max-height 方法简单有效，但也有一些需要注意的地方。
- max-height 数值要合理：设得太小会导致内容被裁剪，太大则动画时间不自然
- 避免使用 height: auto 过渡：浏览器不支持从 0 到 auto 的 transition
- overflow: hidden 必不可少：防止内容在折叠时溢出显示
- 移动端适配：考虑响应式场景下菜单高度变化，可动态计算 max-height
基本上就这些。用 max-height + transition 是最实用的方式，而 @keyframes 更适合需要复杂动画逻辑的场景。关键是理解高度动画的局限性，并选择合适的技术方案绕过限制。
