如何用css transition制作折叠菜单动画

使用max-height结合transition实现折叠菜单动画，通过切换expanded类控制max-height从0到300px变化，配合overflow:hidden实现平滑展开收起效果。

使用 CSS transition 制作折叠菜单动画，关键是控制元素的高度或 max-height 配合过渡效果，实现平滑展开与收起。下面介绍一种常见且实用的做法。

1. 使用 max-height 实现可动画的高度变化

直接对 height: auto 做 transition 是无效的，因为 auto 不是一个具体数值。解决方法是使用 max-height 来模拟高度变化。

基本思路：

• 默认状态：设置较小的 max-height（如 0）并隐藏溢出内容（overflow: hidden）
• 展开状态：设置足够大的 max-height（如 500px），确保能容纳所有子内容
• 通过类名切换触发 transition

.menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.menu.expanded {
  max-height: 500px;
}

2. HTML 结构与 JavaScript 控制

菜单结构通常包含一个按钮和一个下拉容器：

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

38

查看详情

菜单

  选项 1
  选项 2
  选项 3

用 JavaScript 切换类名：

function toggleMenu() {
  const menu = document.getElementById('menu');
  menu.classList.toggle('expanded');
}

3. 优化体验的小技巧

让动画更自然，可以注意以下几点：

• max-height 设置合理值：不能太小导致内容被裁剪，也不能太大影响性能（比如设成 9999px 可能造成卡顿）
• 使用 ease-in-out 曲线：比 linear 更顺滑
• 添加 will-change 提升性能（可选）：will-change: max-height;
• 配合 opacity 或 transform 增加视觉层次（例如淡入淡出）

4. 完整示例代码

.menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background: #f8f8f8;
}
.menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}
.menu.expanded {
  max-height: 300px;
  border-top: 1px solid #ddd;
}


展开菜单

  首页
  关于
  联系



function toggleMenu() {
  const menu = document.getElementById('menu');
  menu.classList.toggle('expanded');
}

基本上就这些。关键在于理解 max-height + overflow + transition 的组合用法，避免尝试对 height: auto 做动画。这种方式兼容性好，无需 JS 计算高度，适合大多数折叠菜单场景。

以上就是如何用css transition制作折叠菜单动画的详细内容，更多请关注数字提纲【www.sztg.com.cn】。