Tengo un problema con React. Me gustaría que mi menú móvil se cierre solo después del final de la transición en mi último tramo del div Hover-Clone.
Logré hacer algo, pero cada segundo que vuelvo a abrir el menú, se cierra automáticamente.
No entiendo como puedo hacer que funcione? ¿Debo usar useTransition, useRef, useHook?
const [isActive, setIsActive] = useState(false); const showNavBar = () => { setIsActive(!isActive); }; const spanEnd = document.querySelectorAll('.end'); spanEnd.forEach(l => { if (isActive === true) { l.addEventListener('transitionend', () => { showNavBar(); }); } }); <nav className={isActive ? Style.navBarMobile : Style.navBar}> <ul className={Style.navBarList}> <li className={Style.navBarListItem}> <NavLink className={Style.navBarListLink} to='/a_propos'> <div className={Style.original}> <span>à</span> <span> </span> <span>p</span> <span>r</span> <span>o</span> <span>p</span> <span>o</span> <span>s</span> </div> <div className={Style.hoverClone}> <span>à</span> <span> </span> <span>p</span> <span>r</span> <span>o</span> <span>p</span> <span>o</span> <span className='end'>s</span> </div> </NavLink> </li>Saludos cordiales
Descargo de responsabilidad: no soy una bestia reactiva
Su método showNavBar en realidad no muestra la barra de navegación, sino que la alterna. Si está cerrado, lo abrirá, si está abierto, lo cerrará.
toggleNavBar )setIsActive(true) en su lugarPruebe la segunda opción y vea qué sucede.
editar De hecho, probablemente aún necesite la opción de alternar para el botón abrir/cerrar
Entonces podrías hacer
const ToggleNavBar = (to = null) => { const end_state = to === null ? !isActive : to setIsActive(end_state); };luego úsalo para tu botón como
// ... onClick={toggleNavBar} // ...Y para tu ciclo de lapso
//... toggleNavBar(true) //...