Estoy trabajando en una notificación de brindis personalizada. Pero la parte difícil para mí es que no he podido ocultar correctamente la notificación del brindis. Cuando hago clic para mostrarlo, el brindis tiene una animación a la izquierda, el problema es que el brindis se va a ocultar y simplemente desaparece y no se desliza hacia la derecha. Estoy trabajando con react y tailwind css. Aquí está el código. También dejo un enlace al caso. https://codesandbox.io/s/toast-notification-ucx2v?file=/src/components/toastNotification.jsx Espero que me puedan ayudar.

-----Componente de la aplicación-----

 import { useEffect, useState } from "react"; import ToastNotification from "./components/toastNotification"; import "./styles.css"; export default function App() { const [showToast, setShowToast] = useState(false); const addToCart = () => { setShowToast(true); }; useEffect(() => { setTimeout(() => { setShowToast(false); }, 3000); }, [showToast]); return ( <div className="App"> <ToastNotification showNotification={showToast} /> <button className="w-1/2 p-2 flex items-center justify-center rounded-md bg-indigo-400 text-white" type="submit" onClick={addToCart} > Add to cart </button> </div> ); }

-----Componente tostado-----

 import React, { useEffect, useState } from "react"; const ToastNotification = ({ showNotification }) => { useEffect(() => { setTimeout(() => {}, 5000); }, []); return ( <> {showNotification === false ? null : ( <div className="static z-20"> <div className={`${ showNotification ? "animate__animated animate__slideInRight absolute top-16 right-4 flex items-center text-white max-w-sm w-full bg-green-400 shadow-md rounded-lg overflow-hidden mx-auto" : "animate__animated animate__slideOutRight absolute top-16 right-4 flex items-center text-white max-w-sm w-full bg-green-400 shadow-md rounded-lg mx-auto" }`} > <div class="w-10 border-r px-2"> <i class="far fa-check-circle"></i> </div> <div class="flex items-center px-2 py-3"> <div class="mx-3"> <p>add to car</p> </div> </div> </div> </div> )} </> ); }; export default ToastNotification;