如何在React中将动画添加到响应Nav

我想在按下按钮打开Nav上的取消菜单时添加动画或过渡。 屏幕较小时会出现该按钮 这是代码

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>
      {showNav && (
        <div className="flex fixed w-full 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">
          <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>
      )}
    </>
  );
};

我试着将过渡添加到海军美孚,但没有成功。 我是新手,所以我需要帮助。 谢谢