Estoy tratando de crear una barra lateral emergente con una pequeña lista de elementos y configuré la opacidad en 0 para comenzar, luego, cuando se abre, la opacidad se establece en 1. Actualmente se está cargando, se desvanece en el elemento y luego se desvanece. fuera debido a una transición. pero no estoy seguro de por qué se está desvaneciendo, aunque tengo la opacidad establecida en 0.
.inputItem { opacity: 0; margin: 2vh, 0; position: relative; height: 40px; width: 100%; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } function menuOpen() { if(!toggled){ document.getElementsByClassName('inputItem').style = 'opacity: 1;' toggled = true } else { document.getElementsByClassName('inputItem').style = '' toggled = false } } <div id='sideMenu' class='sideMenu'> <form id='inputWrapper' class=inputWrapper> <div id='inputItem' class='inputItem'> <input id='x1' type='text' name=''> <label class='plntPropInptTxt'>X</label> <span></span> </div> </form> </div>el código completo aquí: https://orbiting-simulator.erodecode.repl.co cuando elimino las transiciones de elementos, no aparece y luego desaparece. Creo que su carga apareció entonces porque tiene una transición, tiene que desaparecer lentamente cuando se carga el código de opacidad.
document.getElementsByClassName() devuelve una lista de elementos similar a una matriz, no un solo elemento. Tendría que usar for loop para iterar a través de la lista.
Una solución más fácil es usar document.querySelectorAll() en su lugar, lo que simplifica la iteración:
document.querySelectorAll('.inputItem').forEach(el => el.style = 'opacity: 1;');Pero, debe evitar usar estilos en línea, use clases en su lugar. Y en lugar de controlar la opacidad de cada elemento individual del menú, controle el menú en sí:
.sideMenu { opacity: 0; } .sideMenu.opened { opacity: 1; }y javascript:
if (toggled) sideMenu.classList.remove("opened"); else sideMenu.classList.add("opened");