Im trying to create a pop-out sidebar with a small list of items in it and ive set the opacity to 0 to begin with then when it opens, the opacity is set to 1. Its currently loading, fading in the item, then fading out because of a transition. but im not sure why its fading in to begin with even though i have the opacity set to 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>
the full code here: https://orbiting-simulator.erodecode.repl.co when i remove the item transitions, it doesnt appear then disappear. i believe its loading appeared then because it has a transition, it has to slowly disappear when the opacity code is loaded.
document.getElementsByClassName() returns an array-like list of elements, not a single element. You'd have to use for loop to iterate through list.
An easier solution is to use document.querySelectorAll() instead, which simplifies the iteration:
document.querySelectorAll('.inputItem').forEach(el => el.style = 'opacity: 1;');
But, you should avoid using inline styles, use classes instead. And instead of controlling opacity of each individual item of the menu, control the menu itself:
.sideMenu
{
opacity: 0;
}
.sideMenu.opened
{
opacity: 1;
}
and javascript:
if (toggled)
sideMenu.classList.remove("opened");
else
sideMenu.classList.add("opened");