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

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

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

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《CSS动画实现折叠菜单展开效果》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

用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 animation制作折叠菜单展开动画

制作折叠菜单的展开动画，关键在于用 CSS 控制高度变化并配合 transition 或 animation 实现平滑效果。虽然使用 transition 更常见也更简单，但如果你希望用 CSS animation 来实现，下面是一个实用方案。

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

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

<div class="menu">
  <button class="menu-toggle">展开/收起</button>
  <ul class="menu-list">
    <li>菜单项 1</li>
    <li>菜单项 2</li>
    <li>菜单项 3</li>
  </ul>
</div>

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; /* 默认收起 */
}
<p>/<em> 展开动画 </em>/
@keyframes expand {
from { max-height: 0; opacity: 0; }
to { max-height: 500px; opacity: 1; }
}</p><p>/<em> 收起动画 </em>/
@keyframes collapse {
from { max-height: 500px; opacity: 1; }
to { max-height: 0; opacity: 0; }
}</p><p>/<em> 当添加展开类时触发展开动画 </em>/
.menu-list.expanded {
animation: expand 0.3s ease-in-out forwards;
}</p>

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