Currently working on a hamburger menu with animations for displaying and hiding the menu after clicking a button. I'm facing an issue where there is a delay in hiding the menu equal to the animation time. Despite trying multiple solutions, the delay persists.
@keyframes appear {
from {
max-height: 0;
}
to {
max-height: 100vh;
}
}
@keyframes hide {
from {
max-height: 100vh;
}
to {
max-height: 0;
}
}
.header__menu{
position: absolute;
left: 0;
top: 2.6em;
flex-direction: column;
width: 100vw;
color: #fff;
text-transform: lowercase;
@include concert-one;
font-size: 1.8rem;
background-color: $violet;
text-align: center;
overflow: hidden;
display: none;
}
and JS
hamburgerMenu.style.display = "none";
hamburgerButton.addEventListener("click", () => {
if (hamburgerMenu.style.display == "none") {
hamburgerMenu.style.animation = "appear 1s ease-in both";
hamburgerMenu.style.display = "flex"
} else if (hamburgerMenu.style.display == "flex") {
hamburgerMenu.style.animation = "hide 1s ease-in both";
setTimeout(() => {
hamburgerMenu.style.display = "none";
}, 1000);
}
})
HTML
<header class="header">
<div class="header__logo">
travel
</div>
<nav class="header__nav">
<a href="#"><img src="public/img/icons/whatsapp.svg" alt="Whatsapp"></a>
<a href="#"><img src="public/img/icons/twitter.svg" alt="Twitter"></a>
<a href="#"><img src="public/img/icons/facebook.svg" alt="Facebook"></a>
<a href="#"><img src="public/img/icons/instagram.svg" alt="instagram"></a>
</nav>
<div class="header__hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div class="header__menu">
<span>Whatsapp</span>
<span>Twitter</span>
<span>Facebook</span>
<span>Instagram</span>
</div>
</header>