菜单显示平滑过渡并折叠

Question

我想用 tailwincss 实现转换，在 'active' 状态变化时，我的意思是当菜单是 shown/collapsed 我想实现平稳而令人愉悦的过渡

我尝试通过添加 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 class）无法设置动画，你可以看到整个动画属性列表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.

菜单显示平滑过渡并折叠

Smooth transition on menu show and collapsed

reactjs

sass

next.js

css-transitions

tailwind-css