导航栏汉堡包不起作用 [react-tailwindcss]

Question

我对 React 开发还很陌生，我正在用 tailwindcss 进行一些实验。我正在尝试构建一个移动设备导航栏的小示例，但从右侧的过渡并不顺利。

我在这里查看了论坛和其他答案，但它们都不适合我的情况。

这是导航栏组件： 它试图在导航栏坚果中向我的汉堡添加功能，但它不起作用，尽管它在大屏幕上显示正常，但菜单无法在小型设备上打开 这是一个代码示例 使用汉堡菜单切换移动导航栏 代码：

const Menu = ({isOpen}) => {
  return (
    <ul className={`flex-1 flex justify-center items-center gap-16 max-lg:hidden ${isOpen ? ("flex") : (" hidden md:flex")}`}>
  {navLinks.map((item) => (
    <li key={item.label}>
      <a href={item.href}
      className="block md:inline-block font-montserrat leading-normal text-lg text-slate-gray">
        {item.label}
      </a>
    </li>   
  ))}
</ul>
  )
}

const Nav = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <header className="padding-x py-8 absolute z-10 w-full">
        <nav className="flex justify-between items-center max-container">
          <a href="#">
           <img src={headerLogo} alt="Nike logo" width={130} height={29}/>
          </a>
          <div className="hidden max-lg:block">
          <button
         onClick={() => setIsOpen(!isOpen)}
         className="flex items-center px-3 py-2 rounded-full text-black-500 hover:text-black-400" >
         <svg
           className={`fill-current h-3 w-3 ${isOpen ? "hidden" : "block"}`}
          >
         </svg>
         <svg
           className={`fill-current h-3 w-3 ${isOpen ? "block" : "hidden"}`}
         >
         </svg>
       </button>
      </div>
      {isOpen && <Menu isOpen={isOpen}/> }
        </nav>
    </header>
  )
}

export default Nav```
 


[Error](https://i.stack.imgur.com/d75Rt.jpg)

Any idea on what I'm doing wrong or a hint is greatly appreciated.

Answer 1

我为您提供了一个运行我使用的导航栏的codesandbox。我不知道为什么它会像codesandbox 中那样被破坏，但它仍然有效。为了在导航栏中实现平滑过渡，您需要使用 useTransition 并用您希望元素具有的动画填充它。然后你将制作一个动画div：

{/* MENU MASK */}
{maskTransitions((style, item) =>
    item && (
        <animated.div
            style={style}
            className="relative fixed top-0 left-0 w-full h-full z-50"
        >

        </animated.div>
    )
)}
{/* Mobile Menu */}
{menuTransitions((style, item) =>
    item && (
        <animated.div
            style={style}
            className="fixed bg-indigo-800 top-0 left-0 w-4/5 h-full z-100 shadow"
        >
            <img className="max-w-full h-auto p-5" src={logo} alt="Logo" />
            <ul className="p-5 text-3xl text-white">
                <li><Link to="/" className="border-b border-t py-3 block hover:underline" onClick={() => setShowMenu(false)}>Home</Link></li>
                <li
                    onClick={() => setShowDropdown(!showDropdown)}
                    className="border-b py-3 block"
                >
                    <span>Projecten</span>
                    {dropIcon}
                    {dropdownTransitions((style, item) =>
                        item && (
                            <animated.div
                                style={style}
                                className="relative bg-indigo-800 top-full left-0 w-full z-50 shadow"
                            >
                                {dropdownContent}
                            </animated.div>
                        )
                    )}
                </li>
                <li><Link to="/info" className="border-b py-3 block hover:underline" onClick={() => setShowMenu(false)}>FAQ</Link></li>
            </ul>
        </animated.div>
    )
)}

注意：我还添加了 maskTransition，这样当您打开跨度为 75/80% 宽度的移动菜单时，您将看到一个黑色的底层，具有透视不透明度，以获得更好的外观效果。

带有转换的导航栏示例：