Theodore Steiner Theodore Steiner - 1 month ago 5
Javascript Question

Javascript - Reversing a Modal Animation

I have a few items on a site I'm building that

onclick
activate a modal like this.

Right now the animation is a one-way in that, when you close it or click off from the modal's focus, it just disappears. From what I've been reading, people seems to use the fadeIn/slideIn animation for one time effects, but is it possible, to reverse the animation so instead of just changing display to none, it slides back out?

Answer
#modal{bottom: 0; opacity: 1; transition: bottom 400ms, opacity 400ms; }
#modal.hidden{bottom: -300px; opacity: 0}

Then in button click event:

$("#modal").addClass("hidden")

On close event:

$("#modal").removeClass("hidden")

If you need pure javascript, it would be a bit more code but essentially that's it