I’ve got a problem. So I wanted to make a transition of opacity, so I made a function that shows the div with this transition and then set the opacity of it, however it didn’t work.

My code fragments:

CSS

#menu {
    background-color: rgba(218,218,218,.9);
    transition: opacity 500ms;
}

JavaScript

function openMenu() {
    document.getElementById("menu").style.display = "block";
    document.getElementById("menu").style.opacity = "1";
}
function returnToDesktop() {
    document.getElementById("menu").style.display = "none";
    document.getElementById("menu").style.opacity = "0";
}

HTML

<button style="float: right;" onclick="returnToDesktop()"><img src="images/quit-menu-icon.png"><h2>Go back</h2></button>
<!--  ...  -->
<button onclick="openMenu()"><img src="images/apps-icon.png"></button><h2>Other Apps</h2><br>

Do anyone know the solution?