菜单显示和折叠时平滑过渡

Question

我想用 tailwincss 实现一个过渡，在“活动”状态改变时，我的意思是当菜单显示/折叠时我想实现一个平滑而令人愉悦的过渡

我尝试通过添加transition delay-150 duration-300 ease-in-out 将其添加到状态更改中，但我无法使其工作。

import Link from "next/link";
import { useState } from "react";
import HamburgerMenu from "react-hamburger-menu";
import dynamic from "next/dynamic";

const NavLink = dynamic(() => import("./NavLink"));

export const Navbar = () => {
  const [active, setActive] = useState(false);
  const [isOpen, setIsOpen] = useState(false);

  const handleClick = () => {
    setActive(!active);
    setIsOpen(!isOpen);
  };
  const handleClose = () => {
    setActive(false);
    setIsOpen(false);
  };

  return (
    <nav className="sticky top-0 z-10 flex flex-wrap items-center px-3 py-3 bg-white md:py-3 container bg-red-200">
      <div className="flex flex-wrap items-center justify-between w-full">
        <Link href="/">
          <a className="inline-flex items-center">
            <span className="text-xl font-bold tracking-wide text-black tahu">
              Agoumi.
            </span>
          </a>
        </Link>
        <div className="inline-flex p-0 ml-auto text-xl rounded-full outline-none hover:shadow-sm hover:bg-gray-100 hover:text-black">
          <HamburgerMenu
            isOpen={isOpen}
            menuClicked={handleClick}
            width={20}
            height={15}
            strokeWidth={2}
            rotate={0}
            color="black"
            // borderRadius={15}
            animationDuration={1}
            className="m-3"
          />
        </div>
      </div>
      <div
        className={`${
          active ? "transition delay-150 duration-300 ease-in-out" : "hidden"
        } w-full`}
      >
        <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>
    </nav>
  );
};

export default Navbar;

Answer 1

问题是display 属性（通过hidden 类）不能动画，你可以看到动画属性here 的完整列表。

您可以为height 设置动画，但它需要明确指定整个菜单高度（auto 不会设置动画），因此下面代码中的h-32 只是一个示例，您可能需要根据您的需要更改它具体情况。

这是一个例子：

      <div
        className={`${
          active ? 'h-32' : 'h-0'
        } transition-all delay-150 duration-300 overflow-hidden w-full`}
      >
      ...

注意transition-all被使用，简单的transition不会动画height，而ease-in-out被移除，因为它是多余的，同样的计时功能已经包含在transition-all中。