当前位置：首页 > 文章列表 > 文章 > 前端 > CSS实现折叠菜单展开动画效果

CSS实现折叠菜单展开动画效果

2025-10-11 11:40:47 0浏览收藏

1. 基本结构：HTML 搭建菜单

先写一个简单的折叠菜单结构：


  
  
    菜单项 1
    菜单项 2
    菜单项 3

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 保留最终状态。

今天关于《CSS实现折叠菜单展开动画效果》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于JavaScript,CSS动画,折叠菜单,@keyframes,max-height的内容请关注golang学习网公众号！

JavaScript CSS动画折叠菜单 @keyframes max-height