如何在入口和出口处设置一个 div 动画？

Question

I'm trying to make my div have two different transition animations I took from Animista: one of entry and one on exit.

To do that, I have a classlist toggle function that takes away or add an Open-Menu-Class and Close-Menu-Class. Then, I set the relevant animations. But it seems like only the entry one is working, and the exit one has no animations at all. Not very sure what is going on.

https://codepen.io/BenjaminTham67/pen/bGjEBXZ

animation when the menu is closed
.Hamburger-Menu-Closed {
    -webkit-animation: scale-out-hor-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: scale-out-hor-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

animation when the menu is open
.Hamburger-Menu-Opened {
    -webkit-animation: scale-in-hor-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-hor-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

Note: somethings needed to be changed, so the buttons are just big red squares

Answer 1

Apparently animations cannot be played from display:flex to display:none. That's why the exit animation don't work.

Answer 2

You need to remove document.getElementById("hamburgerMenuList").style.display = "none"; . Your code will be work. Also you can use add and remove class instead of toggle .

function openMobileMenu() {
    document.getElementById("hamburgerMenuList").style.display = "flex";
    var openMenu = document.getElementById("hamburgerMenuList");
    openMenu.classList.remove("Hamburger-Menu-Closed");
    openMenu.classList.add("Hamburger-Menu-Opened");

}

function closeMobileMenu() {

    var closeMenu = document.getElementById("hamburgerMenuList");
    closeMenu.classList.remove("Hamburger-Menu-Opened");
    closeMenu.classList.add("Hamburger-Menu-Closed");
}