My attempt to make this sub menu fade in and out upon button press is not working as expected. It should fully fade in shortly after clicking 'help' and completely fade out when clicking 'back'. Is the problem with the method I'm using to make it fade out or is it a strange bug with opacity?
function closepopup(ele) {
ele.parentElement.style.opacity = 1;
let interval = setInterval(() => {
ele.parentElement.style.opacity -= 0.1;
if(ele.parentElement.style.opacity <= 0){
ele.parentElement.style.display = 'none';
clearInterval(interval);
}
}, 50);
}
function openpopup(eleid){
let ele = document.getElementById(eleid)
ele.style.opacity = 0
ele.style.display = 'flex';
let interval = setInterval(() => {
ele.style.opacity += 0.1;
if(ele.style.opacity >= 1){
clearInterval(interval);
}
}, 50);
}body{
background: #93E9BE;
}
.wrapper{
display: flex;
width: 100%;
height:100%;
align-content: center;
justify-content: space-between;
align-items: center;
flex-direction:column;
}
.buttons{
display: flex;
width: 50%;
height:40%;
margin: auto;
align-content: center;
justify-content: space-between;
align-items: center;
flex-direction:column;
}
button{
width:50%;
height:25%;
background:#a68e72;
border-style:solid;
border-color:#8a7154;
border-radius:1vmax;
transition: 0.5s;
font-size:2vmax;
color:rgba(0,0,0,0.5);
}
button:hover{
transform:scale(1.1);
filter:brightness(1.25);
box-shadow:0px 0px 30px -3px #000000;
}
button:active{
transform:scale(0.95);
filter:brightness(0.95)
}
.popupmenu{
display:none;
flex-direction: column;
position:absolute;
top:15%;
left:15%;
width:70%;
height:70%;
background:#a68e72;
border-style:solid;
border-color:#8a7154;
border-radius:1vmax;
padding:2%;
font-size:2vmax;
overflow-y:auto;
overflow-x:hidden;
}
.popupexitbutton{
margin:auto;
width:70%;
height:70%;
}<body>
<div class="wrapper">
<div class="buttons">
<button>Play</button>
<button>Settings</button>
<button onclick="openpopup('help')">Help</button>
</div>
</div>
<div id="help" class="popupmenu">
<p>
To receive support, ask for help in the discord chat or ask a user during a match using the chat feature.
</p>
<button class="popupexitbutton" onclick="closepopup(this)">
Back
</button>
</div>
</body>