Tengo un menú desplegable y cuando se alterna, el menú aparece y desaparece gradualmente. Lo que estoy tratando de eliminar es que la animación de cierre se activa cuando se carga la página inicial. No quiero que se reproduzca la animación cerrada cuando la página se carga inicialmente.
const [menuOpen, setMenu] = useState(false); const location = useLocation(); useEffect(() => { setMenu(false); }, [location]); const variants = { open: { opacity: 1, x: 0 }, closed: { opacity: 0, x: "-25%" }, }; return ( <div> <button onClick={() => { setMenu((menuOpen) => !menuOpen); }} > </button> <div> <motion.nav animate={menuOpen ? "open" : "closed"} variants={variants}> <DropDownMenu /> </motion.nav> </div> </div> );¿Hay alguna solución para que las animaciones solo se activen cuando se alterna el botón?
Siguiendo los documentos
Establézcalo en
falsepara inicializar con los valores en animate (deshabilitando la animación de montaje).
// As false (disable mount animation) <motion.div initial={false} animate={{ opacity: 0 }} /> Así que pase initial={false} a su etiqueta motion.nav .