如何使用Tailwind CSS实现菜单展开/收起的平滑过渡效果

问题原因 #

1. 使用hidden（对应CSS属性display: none）控制菜单显隐，CSS过渡动画不支持display属性的变化，元素会直接消失/出现，无法触发过渡效果
2. transition相关类仅在active状态为true时添加，元素初始状态没有过渡规则，状态切换时无法捕获属性变化执行动画

解决方案 #

将显隐切换的属性替换为支持过渡的max-height和opacity，同时把过渡相关类固定在元素上，不要做条件切换：

1. 给菜单容器默认添加overflow-hidden隐藏超出高度的内容，默认状态设置max-h-0 opacity-0
2. active状态下设置max-h-96 opacity-100（max-h-96对应最大高度384px，你可以根据实际菜单高度调整为更大的内置值，或者用Tailwind JIT的任意值写法比如max-h-[600px]）
3. 把transition相关类固定写在容器的公共类里，不要做条件判断

修改后的菜单容器代码如下：

<div
  className={`w-full transition-all delay-150 duration-300 ease-in-out overflow-hidden ${
    active ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
  }`}
>
  <div className="flex flex-col items-start w-full align-center">
    <NavLink close={handleClose} to="/" linkName="Home" isOpen={false} />
    <NavLink
      close={handleClose}
      to="about"
      linkName="About Me"
      isOpen={false}
    />
    <NavLink
      close={handleClose}
      to="value"
      linkName="Values"
      isOpen={false}
    />
    <NavLink
      close={handleClose}
      to="projects"
      linkName="Projects"
      isOpen={false}
    />
    <NavLink
      close={handleClose}
      to="contact"
      linkName="Contact us"
      isOpen={false}
    />
  </div>
</div>

如果想要更自然的动画效果，还可以额外加Y轴位移的过渡：默认状态加translate-y-[-10px]，active状态加translate-y-0，动画会更有层次感。

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