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

Posted 2023-02-22

【中文标题】如何在 nextjs 应用程序的导航栏上从左到右添加动画？

【英文标题】：How can I add Animation left to right on navbar in nextjs app?

【发布时间】：2021-08-30 23:40:14

【问题描述】：

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

代码如下： indexjs 文件：

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
</>

)

Navbar.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"  />
            <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">
                  [phone]
                </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-
                d="M4 6h16M4 12h16M4 18h16"
              ></path>
            </svg>
          </div>
        </nav>
      </header>
    </div>
  );
;

export default Navbar;

Sidebar.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"  />
        </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-
            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;

【问题讨论】：

不要将sidebar ? ( 作为参数传递给导航栏。并添加一个类而不是显示和隐藏，以便动画可以工作。根据 sidebar 的值，在 Navbar 组件的父 div 中切换一个类。根据该类名添加样式，瞧..

@AbinThaha 你能给我看代码吗，这样我就可以接受你的回答，这样会更容易理解。谢谢

我可以分享代码，但如果你尝试这个不是更好，如果你在某个时候遇到困难，让我知道我可以帮助你。那行得通吗？还是您是初学者？

是的，我可以试试。是的，我是初学者，谢谢。

【参考方案1】：

你可以试试这个吗？

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

然后给.sidebar转场？

【讨论】：

我做的完全一样，但在导航栏中

Yooo，在父级上它正在工作，但它没有关闭。请稍等，我会尽快回复您。

Idk，由于某种原因，在侧边栏组件中关闭 svg 不起作用，它从左到右很好地动画，但它不会返回

你在哪里添加了过渡？你可以更新问题吗？