使用 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）。
✅ 正确实现思路
- 初始状态：菜单容器设置 max-h-0 + overflow-hidden，确保内容被裁剪且高度为 0；
- 展开状态：切换为一个足够大的 max-h-xx 值（如 max-h-96），覆盖菜单全部内容高度；
- 添加过渡：统一在元素上声明 transition-all duration-300 ease-in-out，使 max-height 变化产生缓动动画；
- 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 可能不够或过高。此时可采用现代方案：
- 使用 ResizeObserver 监听菜单内容尺寸变化，动态设置 style.maxHeight；
- 或首次展开时用 getBoundingClientRect().height 获取真实高度，再设为 max-height。
但对绝大多数静态导航菜单，max-h-96 + transition-all 已是最简、高效、可维护的方案，无需引入复杂逻辑。
立即学习“前端免费学习笔记（深入）”；
✅ 总结
| 关键点 | 说明 |
|---|---|
| ❌ 避免 hidden + transition | display: none 无法过渡，动画无效 |
| ✅ 推荐 max-height + overflow-hidden | 可动画、语义清晰、Tailwind 原生支持 |
| ⏱️ 必加 transition-all duration-300 ease-in-out | 统一控制所有可动画属性，ease-in-out 更自然 |
| ? max-h-96 是安全起点 | 支持 ~12 行标准导航项；可根据实际调整（如 max-h-[400px]） |
遵循此模式，你将获得一个轻量、稳定、符合 Tailwind 设计哲学的平滑移动端菜单——无需框架，不依赖第三方库，开箱即用。
