Quiero crear algo tal que, según el estado, un div dado aparezca superpuesto a otro div del lado derecho, aquí está mi código:
const [loggedIn, setLoggedIn] = useState<boolean>(false); const [hasConfirmedAccount, setHasConfirmedAccount] = useState<boolean>(false); return ( <> <div style={{ width: "100%" }}> <div style={{ float: "left", width: "50%" }}> <div style={{ width: "100%", height: "100vh", backgroundColor: "#fafafafa" }} ></div> </div> <div id='notLoggedIn' style={{ float: "right", width: "50%" }}> {!loggedIn && ( <div> WHEN LOGGED IN === TRUE </div> )} <div style={ loggedIn && !hasConfirmedAccount ? { width: "100%", transition: "ease-in-out 5s" } : { display: "none" } } > <div id="notConfirmedAccount">WHENE LOGGED IN === TRUE AND hasConfirmedAccount === FALSE</div> </div> </div> </div> </> ); El código funciona bien, cuando loggedIn === true y hasConfirmedAccount === false se ha mostrado div con id = id = notConfirmedAccount en lugar de div con id=notLoggedIn , pero mostrar este div no funciona, quiero un efecto de salida lento del div en el lado derecho que se superpondría al div anterior
¿alguien puede decirme que hacer con esto?
¡Gracias por cualquier ayuda!
2.importe "./animate.css" en la parte superior de su componente o proyecto
3. simplemente ponga el nombre de aniamte en className como este patrón en su div
<div className={style.forgot} className='animate__animated animate__fadeInDown'>también debes controlar tu div que se muestra con el estado
Use los complementos de animación React ReactTransitionGroup y ReactCSSTransitionGroup
El componente adicional ReactTransitionGroup es una API de bajo nivel para animación, y ReactCSSTransitionGroup es un componente adicional para implementar fácilmente transiciones y animaciones CSS básicas.