如何在 nextjs 应用程序的导航栏上从左到右添加 Animation？

Question

我的 nextjs 应用程序中有一个navbar和sidebar组件。 在我的索引组件中，我使用useState在移动设备上显示和隐藏侧边栏。
它工作得很好，但我想在用户点击汉堡菜单时添加 animation，侧边栏应该从左到右动画，当点击关闭图标时，它应该 go 从右到左返回。 仅供参考，我正在使用顺风 css。

这是代码：
index.js 文件：

export default function Home() {
 const [sidebar, setSidebar] = useState(false);
return(
<>
        <Navbar sidebar={sidebar} setSidebar={setSidebar} />
        {sidebar ? (
          <div className={sidebar ? "transform-x-0" : "transform-x-full"}>
            <Sidebar sidebar={sidebar} setSidebar={setSidebar} />
          </div>
        ) : null}
</>

)

导航栏.js：

const Navbar = ({ sidebar, setSidebar }) => {
  return (
    <div>
      <header className="px-4 max-w-desktop mx-auto text-blacklight">
        <nav
          className="
          flex
          lg:flex-row
          items-center
          flex-auto
          justify-between
          lg:mx-auto
          md:py-6
          py-4
          relative
          navigation
        "
          id="navigation"
        >
          <div className="flex flex-row items-center">
            <img src="./assets/logo.svg" alt="fab systems" />
            <h2 className="text-lg font-extrabold flex-none ml-1 leading-none">
              FAB <br />
              SYSTEMS
            </h2>
          </div>
          <ul
            className="
            lg:flex lg:flex-row
            flex-col
            max-w-full
            lg:w-2/3
            mt-4
            lg:mt-0
            hidden
            lg:items-center
            justify-between
            flex-none
          "
          >
            <li className="menu-links">
              <a href="./features.html">Features</a>
            </li>
            <li className="menu-links">
              <a href="./pricing.html">Pricing</a>
            </li>
            <li className="menu-links">
              <a href="./customer-result.html">Customer Results</a>
            </li>
            <li className="menu-links">
              <a href="./about.html">About</a>
            </li>
            <li className="menu-links">
              <a href="#">Blog</a>
            </li>
            <li className="menu-links">
              <a href="#">Support</a>
            </li>
            <div className="flex flex-col">
              <li
                className="
                menu-links
                bg-dark-blue
                py-2
                rounded-full
                text-white
                font-semibold
                px-4
              "
              >
                <a href="#">Free Demo</a>
              </li>
              <p className="absolute right-0 w-screen text-right bottom-0 text-sm">
                or call sales
                <a href="https://twitter.com/" className="text-blue">
                  +91 982-488-5838
                </a>
              </p>
            </div>
          </ul>
          <div className="lg:hidden">
            <svg
              className="w-8 h-8 lg:hidden"
              id="hamburger"
              onClick={() => setSidebar(true)}
              fill="none"
              stroke="#354650"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              ></path>
            </svg>
          </div>
        </nav>
      </header>
    </div>
  );
};

export default Navbar;

侧边栏.js：

import React from "react";

const Sidebar = ({ sidebar, setSidebar }) => {
  const hideSidebar = () => {
    setSidebar(!sidebar);
  };

  return (
    <div
      className="
        overflow-x-hidden
        min-h-screen
        absolute
        z-50
        bg-dark-green
        lg:px-12
        px-4
        md:py-6
        py-4
        transform
        left-0
        w-screen
        transition
        duration-300
        top-0
      "
      id="mobile-nav"
    >
      <div className="flex flex-row justify-between items-center">
        <div>
          <img src="./assets/logo.svg" alt="fab systems" />
        </div>
        <svg
          className="w-8 h-8 lg:hidden mr-2"
          id="close"
          onClick={hideSidebar}
          fill="none"
          stroke="#FFFFFF"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          ></path>
        </svg>
      </div>
      <ul className="text-xl text-white my-4">
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="./features.html">Features</a>
        </li>
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="./pricing.html">Pricing</a>
        </li>
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="./customer-result.html">Customer Results</a>
        </li>
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="./about.html">About</a>
        </li>
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="#">Blog</a>
        </li>
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="#">Support</a>
        </li>
        <li className="menu-links py-4">
          <a href="#">Free Demo</a>
        </li>
      </ul>
      <div className="relative py-1 w-screen flex flex-row pr-4">
        <input
          type="email"
          className="
            p-2
            px-3
            border-gray-400
            rounded-tl rounded-bl
            border
            text-sm
            relative
            max-w-full
            w-full
          "
          placeholder="Enter your phone"
        />
        <button
          className="
            py-2
            text-white
            rounded-tr-full rounded-br-full
            bg-dark-blue
            text-sm
            px-4
            mr-4
            sm:w-1/4
            w-1/2
            border border-blue-600
            -ml-2
          "
        >
          Try Free Demo
        </button>
      </div>
    </div>
  );
};

export default Sidebar;

Answer 1

你能试试这个吗？

<div className={`sidebar ${sidebar ? "transform-x-0" : "transform-x-full"}`}>

并给.sidebar过渡？