如何使用TailwindCSS实现移动端菜单平滑展开效果？

问题描述 #

使用TailwindCSS开发移动端菜单时，点击汉堡图标菜单会直接弹出，尝试添加delay类无效果，需要实现平滑显示的过渡动画。

原因分析 #

直接通过hidden类切换菜单状态时，display: none属性无法被CSS过渡动画作用，因此看不到平滑效果。必须改用支持过渡的CSS属性（如max-height、opacity）来实现动画。

解决方案步骤 #

1. 调整菜单初始样式 #

修改.mobile-menu的默认类，设置初始隐藏状态并添加过渡相关属性：

<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto mobile-menu max-h-0 overflow-hidden transition-all duration-300 ease-in-out opacity-0 lg:max-h-screen lg:opacity-100">

• max-h-0：初始高度设为0，隐藏菜单内容
• overflow-hidden：防止菜单内容溢出
• transition-all duration-300 ease-in-out：设置所有属性的过渡动画，时长300ms
• opacity-0：初始完全透明
• lg:max-h-screen lg:opacity-100：大屏（lg及以上断点）下保持菜单默认显示

2. 修改JavaScript切换逻辑 #

不再切换hidden类，改为切换控制显示的类：

const btn = document.getElementById("show-menu");
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
  menu.classList.toggle("max-h-screen");
  menu.classList.toggle("opacity-100");
});

• max-h-screen：点击后菜单高度设为屏幕高度，完全展开
• opacity-100：点击后菜单完全显示

完整代码示例 #

修改后的HTML #

<body>
    <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
        <div class="flex items-center flex-shrink-0 text-white mr-6">
          <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><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>
        <div class="block lg:hidden">
          <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white" id="show-menu">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
          </button>
        </div>
        <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto mobile-menu max-h-0 overflow-hidden transition-all duration-300 ease-in-out opacity-0 lg:max-h-screen lg:opacity-100">
          <div class="text-sm lg:flex-grow">
            <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
              Docs
            </a>
            <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
              Examples
            </a>
            <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
              Blog
            </a>
          </div>
          <div>
            <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 mt-4 lg:mt-0">Download</a>
          </div>
        </div>
      </nav>

    <!-- JavaScript -->
    <script src="script.js"></script>
</body>

修改后的JavaScript #

const btn = document.getElementById("show-menu");
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
  menu.classList.toggle("max-h-screen");
  menu.classList.toggle("opacity-100");
});

内容的提问来源于stack exchange，提问作者henrydoe