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

Question

我的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" 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">
[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-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转换？