Si renderizo condicionalmente un componente dependiendo de algún estado, ¿cómo puedo animar su transición entre sus estados abierto y cerrado en React with TailwindCSS?
{successMessage && ( <div className="flex transition-all ease-in-out duration-300 bg-gray-200 w-44 items-center justify-between px-2 rounded"> <p>Added to watchlist!</p> <button onClick={() => setSuccessMessage(false)}>X</button> </div> )}Este código funciona a medias, pero no tiene animación ni período de transición. ¿Cómo puedo arreglar esto?
Prueba algo como esto:
<div className={`flex transition-all ease-in-out duration-300 bg-gray-200 w-44 items-center justify-between px-2 rounded ${your_state ? 'opacity-100' : 'opacity-0'}`}> ... </div>Recomendaría AOS libary para hacer esto, ya que necesitaría trabajar un poco más para que esto funcione con TailwindCSS.
Prueba esto
Instalar AOS
npm install aos --saveponer en su archivo
import React, { useEffect } from "react"; import AOS from 'aos'; import "aos/dist/aos.css"; useEffect(() => { AOS.init({ duration : 1000 }); }, []);Puedes cambiar la duración como quieras.
Agregar como atributo a la etiqueta HTML
data-aos="animation_name"
Ejemplo
<div> data-aos="fadeIn" </div>Atributos extra que puedes usar
data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center"