Estoy tratando de agregar algo de experiencia de usuario con animaciones. El problema es la forma en que tengo mi pantalla configurada. Actualmente no renderizo mi barra lateral cuando está cerrada, se ve muy bien y responde, pero parece que no puedo agregar animaciones debido al diseño que elegí. Como los componentes renderizados condicionalmente no parecen funcionar con animaciones.
export default function Layout(props) { const [open, setOpen] = useState(false); const isMobile = useMediaQuery({ query: "(max-width: 768px)" }); return ( <div className="relative h-screen w-screen flex"> /// SIDEBAR {open && ( <section className={"fixed top-0 left-0 bg-white h-screen z-20 w-64 md:relative md:w-1/3 delay-400 duration-500 ease-in-out transition-all transform " + (open ? " translate-x-0 " : " translate-x-full ")}></section> )} {open && isMobile && ( <div onClick={(ev) => { setOpen(false); }} className="fixed left-0 mt-0 bg-black bg-opacity-60 w-screen h-screen z-10" ></div> )} <div className="relative w-full h-full"> /// TOP BAR <div className="absolute top-0 h-16 w-full bg-blue-600 flex flex-row items-center p-2 z-5"> <MenuIcon onClick={(ev) => { setOpen(!open); }} className="text-white" width={30} height={30} ></MenuIcon> </div> /// CONTENT <div className="pt-16 h-full w-full overflow-y-auto">{props.children}</div> </div> </div> ); } Intenté usar algo como este delay-400 duration-500 ease-in-out transition-all transform " + (isOpen ? " translate-x-0 " : " translate-x-full ")
¿Hay alguna manera de hacer animaciones que aparecen/desaparecen con mi configuración actual o tengo que cambiar el diseño por completo?