Tailwind CSS 中实现平滑移动菜单过渡动画的完整方案

使用 Tailwind CSS 为移动端菜单添加流畅的高度过渡动画，需规避 height: auto 不可动画的限制，通过 max-height + overflow-hidden 配合 JavaScript 控制类切换，实现自然展开/收起效果。

使用 tailwind css 为移动端菜单添加流畅的高度过渡动画，需规避 `height: auto` 不可动画的限制，通过 `max-height` + `overflow-hidden` 配合 javascript 控制类切换，实现自然展开/收起效果。

在 Tailwind CSS 中，直接对 hidden 类进行切换（如 menu.classList.toggle('hidden')）会导致菜单瞬间显示或消失——因为 hidden 本质是 display: none，而 display 属性无法被 CSS transition 动画。要实现真正平滑的下拉菜单过渡效果，关键在于：用可动画的 CSS 属性（如 max-height）替代不可动画的布局属性（如 height: auto 或 display）。

✅ 正确实现思路

1. 初始状态：菜单容器设置 max-h-0 + overflow-hidden，确保内容被裁剪且高度为 0；
2. 展开状态：切换为一个足够大的 max-h-xx 值（如 max-h-96），覆盖菜单全部内容高度；
3. 添加过渡：统一在元素上声明 transition-all duration-300 ease-in-out，使 max-height 变化产生缓动动画；
4. JavaScript 仅控制类名切换，不操作内联样式，保持与 Tailwind 的设计理念一致。

⚠️ 注意：max-height 的目标值必须大于菜单实际展开时的最大高度（例如 max-h-96 ≈ 384px），否则动画会提前截断；若菜单内容动态变化较大，建议结合 ResizeObserver 动态计算，但对常规导航菜单，预设安全值已足够可靠。

✅ 完整代码示例

<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <!-- Logo & Hamburger -->
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <svg class="fill-current h-8 w-8 mr-2" viewBox="0 0 54 54"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
    <span class="font-semibold text-xl tracking-tight">Menu</span>
  </div>

  <!-- Mobile Toggle Button -->
  <div class="block lg:hidden">
    <button id="show-menu" class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
    </button>
  </div>

  <!-- Mobile Menu (with smooth transition) -->
  <div class="w-full block lg:hidden overflow-hidden transition-all duration-300 ease-in-out mobile-menu max-h-0">
    <div class="text-sm pt-4 pb-2">
      <a href="#responsive-header" class="block px-4 py-2 text-teal-200 hover:text-white">Docs</a>
      <a href="#responsive-header" class="block px-4 py-2 text-teal-200 hover:text-white">Examples</a>
      <a href="#responsive-header" class="block px-4 py-2 text-teal-200 hover:text-white">Blog</a>
    </div>
    <div class="px-4 pb-4">
      <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white">Download</a>
    </div>
  </div>
</nav>

// script.js
const btn = document.getElementById("show-menu");
const menu = document.querySelector(".mobile-menu");

btn.addEventListener("click", () => {
  // 切换 max-height 状态，触发 transition
  menu.classList.toggle("max-h-0");
  menu.classList.toggle("max-h-96"); // 足够容纳常见菜单项（约 384px）
});

? 进阶提示：应对动态高度（可选）

若菜单项数量不固定或含响应式内容（如多行文本、图片），预设 max-h-96 可能不够或过高。此时可采用现代方案：

HARPA AI

浏览器插件，ChatGPT自动化助手，将ChatGPT集成到谷歌搜索

下载

• 使用 ResizeObserver 监听菜单内容尺寸变化，动态设置 style.maxHeight；
• 或首次展开时用 getBoundingClientRect().height 获取真实高度，再设为 max-height。

但对绝大多数静态导航菜单，max-h-96 + transition-all 已是最简、高效、可维护的方案，无需引入复杂逻辑。

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

✅ 总结

遵循此模式，你将获得一个轻量、稳定、符合 Tailwind 设计哲学的平滑移动端菜单——无需框架，不依赖第三方库，开箱即用。