How to have a div animate on both entrance and exit?-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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");
}