I would like to make the transition smoother when selecting states between the left arrow & right arrow.
App.js
import React from "react";
import { useState } from "react";
import { GoArrowLeft, GoArrowRight } from "react-icons/go";
const ExampleMenu = () => {
const [showtab, setTab] = useState(false);
const handleTab = () => {
setTab(!showtab);
};
return (
<div className='flex justify-between text-white items-center bg-slate-800 mx-auto h-24'>
<h3 className='md:text-3xl z-10 pl-4 w-full sm:text-xl text-slate-300 font-bold '>LOGO</h3>
<div onClick={handleTab} className='hidden md:block animate-pulse pr-4'>
{!showtab ? <GoArrowLeft size={40}/> : <GoArrowRight size={40}/>}
</div>
<div onClick={handleTab}>
{!showtab ? <class className='hidden' /> :
<ul className='hidden md:flex p-4 space-x-2'>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>}
</div>
</div>
);
};
export default ExampleMenu;
Live Example - Tailwind isn't working as it should on here, but if you c+p the code into VSC you'll see it better.
When the left arrow is clicked, the menu will open slower & smoother, same for the right arrow. That is the goal i am trying to accomplish. Thank you in advance!
Dependencies:
npm install react-icons
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
I recommend using React Transition Group since they make react transitions much easier, I've also made a sample here
import { CSSTransition } from "react-transition-group";
...
return (
...
<CSSTransition
in={showtab}
timeout={300}
classNames="tab"
unmountOnExit
>
<ul className="md:flex p-4 space-x-2">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</CSSTransition>
</div>
);
...