Estoy tratando de que la animación funcione cada vez que hago clic en los botones del siguiente proyecto
Código : https://codesandbox.io/s/8fjs8i
Descripción Hay 3 botones llamados primero, segundo y tercero. cuando hago clic en el primero, el cuadro morado a continuación se muestra primero, cuando hago clic en el segundo, se muestra el segundo y así sucesivamente, básicamente, el div se actualiza cada vez que se hace clic en el botón.
Problema: pero el fadIn de animación que le he dado al div solo funciona en la carga de la aplicación. ¿Cómo puedo hacer que funcione cada vez que hago clic en el botón para que el cuadro se desvanezca con una animación para cada clic?
const Renders = ({ arr }) => { const [load, setLoad] = useState(false); useEffect(() => { setLoad(true); setTimeout(() => { setLoad(false); }, 1); }, [arr]); if (load) return <></>; return ( <div className="renders"> <div className="zoomers">{arr}</div> </div> ); };De esta otra forma puedes hacerlo:
const Renders = ({ arr }) => { const [load, setLoad] = useState(false); useEffect(() => { setLoad(true); setTimeout(() => { setLoad(false); }, 1); }, [arr]); return ( <div className="renders"> <div className={load ? '' : "zoomers"}>{arr}</div> </div> ); };Ahora mire diferente, antes de cargar y descargar, ahora es solo un juego con el nombre de la clase, la idea de que cada vez que carga un elemento con la clase de animación, comienza a funcionar.