如何用css transition制作折叠菜单动画-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-15 17:19:01

原创

331人浏览过

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

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

使用 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 控制

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

立即学习“前端免费学习笔记（深入）”；

OmniAudio

OmniAudio 是一款通过 AI 支持将网页、Word 文档、Gmail 内容、文本片段、视频音频文件都转换为音频播客，并生成可在常见 Podcast ap

111

查看详情

<button onclick="toggleMenu()">菜单</button>
<div class="menu" id="menu">
  <a href="#">选项 1</a>
  <a href="#">选项 2</a>
  <a href="#">选项 3</a>
</div>

登录后复制

用 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. 完整示例代码

<style>
.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;
}
</style>

<button onclick="toggleMenu()">展开菜单</button>
<div class="menu" id="menu">
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</div>

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

登录后复制

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

以上就是如何用css transition制作折叠菜单动画的详细内容，更多请关注php中文网其它相关文章！