Me gustaría suavizar la transición al seleccionar estados entre la flecha izquierda y la flecha derecha.

Aplicación.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;

Ejemplo en vivo : Tailwind no funciona como debería aquí, pero si c+p el código en VSC, lo verá mejor.

Cuando se hace clic en la flecha izquierda, el menú se abrirá más lento y suave, lo mismo para la flecha derecha. Ese es el objetivo que estoy tratando de lograr. ¡Gracias de antemano!

Dependencias:

 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: [], }