答案：利用CSS的max-height和transition属性，结合JS控制类名切换，实现平滑折叠菜单动画。通过设置max-height从0到足够大值的过渡，配合overflow:hidden隐藏溢出内容，点击按钮时用JavaScript切换expanded类，触发展开或收起动画，从而在无需复杂脚本的情况下完成交互效果。
实现CSS折叠菜单动画效果，关键在于利用CSS的过渡（transition）和变换（transform）属性，结合高度变化或隐藏显示控制，让菜单展开和收起过程更平滑自然。不需要JavaScript也能完成基础动效，但交互控制通常需要少量JS配合。
1. 基础结构：HTML结构搭建
折叠菜单通常包含一个标题（用于点击触发）和一个内容区域（被折叠的部分）。
<div class="accordion-item">
<button class="accordion-header">菜单标题</button>
<div class="accordion-body">
<p>这里是折叠内容，可以是任意HTML元素。</p>
</div>
</div>
2. 核心CSS：使用max-height实现平滑展开
直接对height从0到auto做transition是无效的，因为auto不是一个具体数值。解决方法是使用max-height模拟高度变化。
默认将内容区域隐藏，并设置最大高度为0；展开时设置一个足够大的max-height值，配合过渡实现动画。
立即学习“前端免费学习笔记（深入）”；
.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background: #f9f9f9;
padding: 0 16px;
}
<p>.accordion-body.expanded {
max-height: 500px; /<em> 要大于内容实际高度 </em>/
padding: 16px;
}</p>说明：
-
overflow: hidden确保超出部分不可见 -
transition控制动画时长和缓动效果 -
max-height: 500px是估算值，需确保能容纳所有内容
3. 交互控制：用JavaScript切换类名
点击标题时，通过JS给内容区域添加或移除expanded类，触发CSS动画。
document.querySelectorAll('.accordion-header').forEach(button => {
button.addEventListener('click', function() {
const body = this.nextElementSibling;
body.classList.toggle('expanded');
});
});
这样每次点击都会切换展开状态，CSS自动处理动画过程。
4. 进阶优化：更自然的动画体验
如果内容高度差异大，固定max-height可能导致动画时间不一致。可改用动态设置内联样式提升精度。
另一种方式是使用height: auto配合requestAnimationFrame计算真实高度，但复杂度更高。
简单项目中，合理设置max-height并调整transition时间即可满足大多数需求。
基本上就这些。核心思路是“用max-height代替height做过渡”，再配合JS控制类名切换，就能实现流畅的折叠动画效果。
