用CSS animation实现折叠菜单动画需通过max-height和opacity变化配合keyframes，结合JS控制类名切换状态。首先设置.menu-list默认max-height:0并隐藏溢出，定义expand和collapse两个关键帧动画分别处理展开与收起的过渡效果，其中expand从max-height:0到500px并增加透明度，collapse反之。当点击按钮时，JavaScript为.menu-list添加或移除expanded类，触发动画。为适应不同内容高度，可将max-height设为较大值如999px以兼容动态项数，同时确保overflow:hidden防止内容溢出。最终通过animation的forwards保持动画结束后的状态，实现平滑展开收起效果。
制作折叠菜单的展开动画，关键在于用 CSS 控制高度变化并配合 transition 或 animation 实现平滑效果。虽然使用 transition 更常见也更简单，但如果你希望用 CSS animation 来实现，下面是一个实用方案。
1. 基本结构：HTML 搭建菜单
先写一个简单的折叠菜单结构：
2. 使用 CSS animation 控制展开与收起
CSS 动画不能直接对 height: auto 做动画，所以需要设定一个最大高度（max-height），通过改变 max-height 触发动画。
定义两个状态的 animation：
立即学习“前端免费学习笔记（深入）”；
- 展开时：从 max-height: 0 到一个足够大的值（如 500px）
- 收起时：反向动画
.menu-list {
max-height: 0;
overflow: hidden;
background: #f0f0f0;
list-style: none;
padding: 0;
margin: 0;
animation: collapse 0s forwards; /* 默认收起 */
}
/ 展开动画 /
@keyframes expand {
from { max-height: 0; opacity: 0; }
to { max-height: 500px; opacity: 1; }
}
/ 收起动画 /
@keyframes collapse {
from { max-height: 500px; opacity: 1; }
to { max-height: 0; opacity: 0; }
}
/ 当添加展开类时触发展开动画 /
.menu-list.expanded {
animation: expand 0.3s ease-in-out forwards;
}
3. 用 JavaScript 切换类名控制动画
通过 JS 添加或移除 expanded 类来触发动画：
document.querySelector('.menu-toggle').addEventListener('click', function() {
const list = document.querySelector('.menu-list');
if (list.classList.contains('expanded')) {
list.classList.remove('expanded');
} else {
list.classList.add('expanded');
}
});
点击按钮时，.expanded 类被添加，触发 expand 动画；再次点击则移除类，回到 collapse 状态。
4. 可选优化：避免 max-height 固定值问题
如果菜单项数量不确定，固定 max-height 可能不够灵活。可以结合 JS 动态设置：
- 在 JS 中计算实际高度
- 将 max-height 设为实际高度 + 动画时间
但若追求简洁，设一个较大的 max-height（如 999px）也能满足大多数场景，只要 overflow: hidden 能隐藏超出部分即可。
基本上就这些。用 CSS animation 做折叠菜单的核心是借助 max-height 和 opacity 配合 keyframes 实现视觉上的展开收起效果，再通过 JS 控制类名切换动画状态。不复杂但容易忽略细节，比如忘记 overflow: hidden 或 forwards 保留最终状态。
