不能直接用 height + transition 实现折叠动画，因 auto 无法参与数值插值。解决方案是通过 max-height（如 0 到 200px）结合 overflow: hidden 和 transition 模拟展开收起效果，确保动画流畅且兼容性好。
在CSS中实现导航菜单的折叠过渡效果，常用于移动端或响应式设计。由于height: 0到height: auto之间无法直接使用transition平滑过渡（因为auto不是可动画的数值），我们可以借助max-height结合overflow来模拟展开与收起的动画效果。
原理说明：为什么不能直接用 height + transition？
height 属性支持像素值（如 100px）和特殊值（如 auto、0）。但CSS过渡（transition）只能在两个确定的数值之间进行插值计算。auto 是一个动态值，浏览器无法预知其具体像素数，因此无法生成中间帧动画。
解决方案是使用 max-height —— 它可以设置一个足够大的上限值代表“完全展开”，再通过改变max-height从0到某个大值来触发视觉上的展开/折叠动画。
实现步骤：max-height + overflow + transition
以下是一个典型的可折叠导航菜单实现方式：
立即学习“前端免费学习笔记（深入）”；
HTML结构示例：
<button class="toggle-btn" onclick="this.classList.toggle('active'); document.querySelector('.nav-menu').classList.toggle('open');">☰</button>
<ul class="nav-menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
CSS样式：
.nav-menu {list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
max-height: 0;
transition: max-height 0.4s ease-out;
}
.nav-menu.open {
max-height: 200px; / 足够容纳所有菜单项 /
}
关键点解释：
- overflow: hidden 确保内容在 max-height 限制下被裁剪，隐藏超出部分。
- max-height: 0 初始状态下菜单不可见。
- max-height: 200px 展开状态，需确保这个值大于实际内容高度，否则会截断菜单。
- transition 应用于 max-height，使变化有缓动动画。
优化建议与注意事项
虽然该方法简单有效，但也存在一些局限性，可通过以下方式优化：
-
合理设置 max-height 上限：避免设得过大（如
9999px），否则动画时间过长或显得不自然。根据菜单项数量估算合理值，例如每项约40px高，5项则设为250px左右。 - 配合 opacity 增强视觉效果：可在展开时添加淡入淡出效果，提升用户体验。
-
考虑使用 JavaScript 控制完成回调：如果需要精确控制动画结束后的行为（比如 focus 某元素），可监听
transitionend事件。 -
注意 Accessibility：折叠菜单应支持键盘导航和屏幕阅读器，建议添加
aria-expanded属性并用JS同步更新。
基本上就这些。这种方法虽非完美（毕竟不是真正基于height:auto的动画），但在大多数场景下足够实用且兼容性良好。关键是理解其限制，并合理设置max-height与overflow的组合逻辑。
