用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）收起时：反向动画
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情
.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 保留最终状态。
以上就是如何用css animation制作折叠菜单展开动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1021974.html
微信扫一扫 
支付宝扫一扫 
