My goal is to create an animation where a hidden menu box slides down and appears when the mouse hovers over a button. The animation works correctly, but I encountered an issue when trying to add the transition from display:inline-block to display:none and back to display:inline-block, as the transition disappears.
I've come across solutions in jQuery, but none in pure JavaScript, except for one using EventListener which I found challenging to implement in my case.
I attempted to split the JS into two functions—one for displaying the block and another for changing the class—but it didn't work. One solution might be to include an EventListener that triggers a function after the display property is modified (simply adding it in JS doesn't seem to suffice). Any assistance on this matter would be greatly appreciated.
Here's the code snippet:
function overbutton(divname) {
element = document.getElementById(divname);
if (element.className == "menu_hidden menu_about") {
//element.style.display ="inline-block";
element.className = "menu_shown menu_about";
} else {
//element.style.display ="none";
element.className = "menu_hidden menu_about";
}
}
function onmenu(divname) {
//element.style.display ="inline-block";
element = document.getElementById(divname);
element.className = "menu_shown menu_about";
}
function outmenu(divname) {
//element.style.display ="none";
element = document.getElementById(divname);
element.className = "menu_hidden menu_about";
}.menu_about {
background-color: white;
height: 100px;
width: 100px;
top: 20px;
left: 50px;
border-radius: 10px;
box-shadow: 0px 0px 10px #2B2B2B40;
-webkit-box-shadow: 0px 0px 10px #2B2B2B40;
-moz-box-shadow: 0px 0px 10px #2B2B2B40;
position: absolute;
padding: 20px;
}
.menu_hidden {
-webkit-transform: translate(0%, -5px);
transform: translate(0%, -5px);
transition: transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
}
.menu_shown {
-webkit-transform: translate(0%, 5px);
transform: translate(0%, 10px);
transition: transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
}<div style="padding-left:100px">
<button class="button-menu" onmouseover="overbutton('about_menu_div')" onmouseout="overbutton('about_menu_div')">
menu Button
</button>
<!-- add style="display:none;"-->
<div id="about_menu_div" class="menu_hidden menu_about" onmouseover="onmenu('about_menu_div')" onmouseout="outmenu('about_menu_div')">
Menu
</div>
</div>JSfiddle: https://jsfiddle.net/g0ktx574/