I have just created a menu that has CSS animations which slides in from the right. I can close it, but the menu just disappears instead of flowing out nicely.
I had also tried a few things, like removing CSS, but it has not worked. The removed CSS can be found commented out.
Here is my code that I have written:
const container = document.querySelector(".container"),
menuIcon = document.querySelector(".menu_icon");
menuIcon.addEventListener("click", () => {
container.querySelector(".menu").classList.toggle("open"),
container.querySelector(".menu_icon").classList.toggle("open"),
container.querySelectorAll(".menu_line").forEach(e => e.classList.toggle("open"))
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu {
background-color: aliceblue;
height: 100vh;
width: 100vw;
display: grid;
align-content: center;
/* align-content: space-evenly; */
text-align: center;
z-index: 0;
/* animation-iteration-count: infinite; */
/* visibility: hidden; */
margin-left: -100vw;
}
.menu.open {
animation: menuFrame 2s ease-in-out;
animation-fill-mode: forwards;
/* animation-direction: alternate; */
}
.menu.closed {
animation: menuFrame 2s ease-in-out;
}
h2 {
color: black;
font-size: 1.6rem;
letter-spacing: .05rem;
}
@keyframes menuFrame {
/* from {opacity: 0; margin-left: -100vw;} */
from {
opacity: 0;
margin-left: 100vw;
}
75% {
opacity: 0.5;
}
to {
opacity: 1;
margin-left: 0vw;
visibility: visible;
}
}
hr {
transform: rotate(100deg);
margin-left: 25vw;
}
.menu_icon {
position: absolute;
/* border: 1px solid coral; */
top: 20px;
right: 20px;
height: 40px;
width: 40px;
display: grid;
align-content: space-evenly;
}
.menu_icon.open {
align-content: center;
}
.menu_line {
height: 1px;
/* width: 100%; */
background: black;
/* margin: 11px auto; */
z-index: 3;
/* border: 1px solid black; */
}
.menu_line:nth-child(1).open {
transform: rotate(45deg);
/* align-self: center; */
}
.menu_line:nth-child(2).open {
transform: rotate(-45deg);
/* align-self: center; */
}<div class="container"><div class="menu_icon"><div class="menu_line"></div><div class="menu_line"></div></div><div class="menu"><h2>Home</h2><h2>About</h2><h2>Contact</h2><hr /></div></div>