Estoy trabajando en un proyecto personal en Next.js Actualmente, tengo problemas para agregar una clase de transition a la barra de navegación cuando responde. Cuando el usuario hace clic en el menú, se abre la barra de navegación y cuando el usuario hace clic en una de las opciones, se cierra. Quiero que tenga una transición suave, pero no puedo hacerlo. A continuación se muestra el código.

CSS

 .navbarWrapper { background-color: #050f2b; border-bottom: 1px solid #000; box-shadow: 0px 2px 10px #000; color: #fff; display: inline-flex; justify-content: space-between; padding: 0.5rem 2rem; width: 100%; } .navbarContainer { align-items: center; display: flex; font-size: 1.2rem; justify-content: space-around; list-style-type: none; width: 100%; } .responsive { transform: translateX(-100vw); opacity: 0; } @media screen and (max-width: 980px) { .navbarWrapper { display: block; } .navbarContainer { display: none; height: auto; justify-content: flex-start; transition: all 2s ease-in-out; } ul.navbarContainer.responsive li { display: flex; justify-content: flex-start; margin: 0 auto; width: 90%; } .responsive { align-items: flex-start; display: flex; flex-direction: column; height: 100vh; opacity: 1; padding: 0; transform: translateX(0); width: 100%; } }

JSX

 <div className={styles.navbarWrapper}> <Link href='/'> <a className={styles.logo}> <Image src={Logo} alt='something' width={200} height={50} /> <div className={styles.logoText}>something</div> </a> </Link> <div className={styles.burger} onClick={handleOnClick}> <GiHamburgerMenu size='2rem' /> </div> <ul className={`${styles.navbarContainer} ${open ? styles.responsive : ''}`}> <li> <Link href='/'> <a className={styles.text} onClick={closeNav}>Home</a> </Link> </li> <li> <Link href='/SolarProducts'> <a className={styles.text} onClick={closeNav}>Products</a> </Link> </li> <li> <Link href='/ContactUs'> <a className={styles.text} onClick={closeNav}>Contact Us</a> </Link> </li> </ul> </div>

Hay una clase de respuesta que se agrega a JSX para abrir la barra de navegación y se elimina cuando se hace clic en una de las opciones.