如何为React响应式导航栏添加移动端菜单过渡动画

问题核心：你当前通过{showNav && ...}的条件渲染方式，会让移动端导航元素直接从DOM中添加/移除，而CSS过渡需要元素持续存在于DOM中才能生效，所以transition没效果。

修改方案 #

将条件渲染改为始终渲染导航容器，通过className切换样式控制显示/隐藏，结合Tailwind的过渡类实现动画：

export const NavBar = () => {
  const [showNav, setShowNav] = useState(false);
  return (
    <>
      <nav className="flex items-center justify-between pl-8 pr-16 fixed w-full border-b-2 h-20 top-0 bg-white/30 backdrop-blur-sm">
        <img
          src="https://res.cloudinary.com/dv8nczwtj/image/upload/v1684896617/Logo_jivlnb.png"
          alt="Logo"
          className="logo"
        />
        <div className="md:flex flex-row space-x-5 hidden">
          <a href="#" className="brand">Apple</a>
          <a href="#" className="brand">Samsung</a>
          <a href="#" className="brand">Xiaomi</a>
          <a href="#" className="brand">Google</a>
        </div>
        <button className="md:hidden" onClick={() => setShowNav(!showNav)}>
          <img
            src="https://res.cloudinary.com/dv8nczwtj/image/upload/v1684859901/menu_wh8ccz.png"
            alt="Menu"
            className="w-6"
          />
        </button>
        <CartWidget />
      </nav>
      {/* 修改此处：始终渲染容器，用className控制显示/隐藏 */}
      <div className={`fixed w-full flex flex-col justify-center items-center space-y-4 pb-2 border-b-2 border-black md:hidden bg-white/30 top-20 pt-4 backdrop-blur-sm transition-all duration-300 ease-in-out ${showNav ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
        <a href="#" className="brand">Apple</a>
        <a href="#" className="brand">Samsung</a>
        <a href="#" className="brand">Xiaomi</a>
        <a href="#" className="brand">Google</a>
      </div>
    </>
  );
};

关键说明 #

• 保留DOM元素：不再通过条件渲染移除元素，避免过渡失效
• 用max-height模拟高度过渡：CSS不支持height:auto的过渡，所以用max-h-0（收起）和max-h-96（展开，可根据实际内容高度调整）替代
• 过渡属性：transition-all duration-300 ease-in-out定义了所有可过渡属性的动画时长和曲线，也可以指定具体属性比如transition-[max-height,opacity]
• overflow-hidden：确保收起状态下内容不会溢出显示

可选优化 #

如果需要更丰富的动画，比如从上方滑入，可以添加transform属性：

className={`fixed w-full flex flex-col justify-center items-center space-y-4 pb-2 border-b-2 border-black md:hidden bg-white/30 top-20 pt-4 backdrop-blur-sm transition-all duration-300 ease-in-out ${showNav ? 'max-h-96 opacity-100 translate-y-0' : 'max-h-0 opacity-0 translate-y-[-20px] overflow-hidden'}`}

内容的提问来源于stack exchange，提问作者Andrés Marino