Reverse a CSS Animation with a Click Event

Question

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>

Answer 1

I got this working by introducing an initial class on the menu div that is removed on click and adding a second animation to .menu:not(.initial) . See below snippet:

 const container = document.querySelector(".container"), menuIcon = document.querySelector(".menu_icon"); menuIcon.addEventListener("click", () => { container.querySelector(".menu").classList.remove("initial"), 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; opacity: 0; /* align-content: space-evenly; */ text-align: center; z-index: 0; /* animation-iteration-count: infinite; */ /* visibility: hidden; */ margin-left: 100vw; } .menu:not(.initial) { animation: menuFrame2; animation-duration: 2s; animation-direction: reverse; animation-fill-mode: both; } .menu.open { animation: menuFrame; animation-duration: 2s; animation-fill-mode: both; } 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; } } @keyframes menuFrame2 { /* 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 initial"> <h2>Home</h2> <h2>About</h2> <h2>Contact</h2> <hr /> </div> </div>