I would like to implement a transition with tailwincss , on 'active' state change, I mean when the menu is shown/collapsed i would like to implement a smooth and pleasing transition

I tried adding it on the state change by adding transition delay-150 duration-300 ease-in-out but i couldn't make it work.

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;

CodePudding user response：

The problem is that the display property (via the hidden class) cannot be animated, you can see the whole list of animatable properties here.

You can animate height, but it requires specifying the full menu height explicitly (auto will not animate), so h-32 in the code below is just an example, you may need to change it depending on your exact circumstances.

Here's an example:

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

Note that transition-all is used, simple transition will not animate height, and ease-in-out is removed, as it is redundant, the same timing function is already included in transition-all.