Tengo un menú lateral en mi sitio web y uno de los elementos tiene dos palabras. Esperaba que apareciera lentamente al igual que los otros elementos, pero en cambio, la segunda palabra aparece toda a la vez. Si quieres comprobarlo por ti mismo, el sitio web es https://grazianofermi.altervista.org/SitoLogin/
Información Entrar:
correo electrónico: prova@gmail.com
contraseña: prova123
function sb() { var y = document.getElementById("hidden-check") if (y.checked) { document.getElementById("sidebar").style.width = "0" } else { document.getElementById("sidebar").style.width = "250px" } } div.sidebar { position: absolute; left: 0; width: 0; box-shadow: 0 0 15px #e96f26; margin-top: 100px; overflow: hidden; transition: 0.2s ease; background-color: white; } button.sidemenu { background-color: white; color: black; border-radius: 0; font-family: "Bebas Neue"; width: 100%; height: 50px; border: none; padding: 0; cursor: pointer; transition: 0.2s ease; margin: 0; font-size: 2vw; text-align: center; } button.sidemenu:hover { background-color: rgb(200, 200, 200); } img.sidemenu-icon { position: absolute; left: 15px; top: 15px; background-color: white; box-shadow: 0 0 15px #e96f26; cursor: pointer; transition: 0.2s ease; width: 45px; border-radius: 5px; padding: 5px; } img.sidemenu-icon:hover { background-color: #e3e3e3; } input#hidden-check { display: none; } <input type="checkbox" id="hidden-check" name="hidden-check"> <label for="hidden-check" onclick="sb()"> <img class="sidemenu-icon" src="sidemenuIcon.png" alt="icon"> </label> <div class="sidebar" id="sidebar"> <a href="index.html"><button class="sidemenu">HOMEPAGE</button></a> <a href="cambiaPass.php"><button class="sidemenu">CAMBIA PASSWORD</button></a> <a href="logout.php"><button class="sidemenu">LOGOUT</button></a> </div>div.sidebar { transition: width ease 2s 0s; }Te recomendaría que uses esto:
function sb() { var y = document.getElementById("hidden-check") if (y.checked) { document.getElementById("sidebar").classList.remove('active');/*change this line*/ } else { document.getElementById("sidebar").classList.add('active');/*change this line*/ } } div.sidebar { position: absolute; left: 0; width: 250px;/*change this line*/ box-shadow: 0 0 15px #e96f26; margin-top: 100px; overflow: hidden; transition: 0.2s ease; background-color: white; transform: translateX(-280px);/*add this line*/ } /*add*/ div.sidebar.active { transform: translateX(0px); }Después de revisar su demostración, todavía puedo ver lo que quiere decir.
Tal vez el problema es que cuando cierras el cajón, el elemento de dos palabras se queda sin espacio y la segunda palabra se empuja hacia abajo. Luego, cuando lo abres, comienza abajo y cuando hay suficiente espacio salta a la misma línea que la primera palabra.
En general, desaconsejaría cambiar el ancho del elemento para ocultarlo, tiende a producir ese tipo de transiciones de aspecto extraño y tiene un rendimiento deficiente. En cambio, recomendaría que lo use como su estado de cierre (en CSS)
transform: translateX(-<enough_pixels_to_hide_the_drawer>); transition: transform 0.2s ease;y para abrirlo
transform: translateX(0)