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

Posted 2023-03-06

【中文标题】菜单显示和折叠时平滑过渡

【英文标题】：Smooth transition on menu show and collapsed

【发布时间】：2021-12-20 03:28:20

【问题描述】：

我想用 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;

【参考方案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中。

【讨论】：

感谢您的详细解释。