Theodore Steiner Theodore Steiner - 1 year ago 77
Javascript Question

Javascript - Reversing a Modal Animation

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

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 Source
#modal{bottom: 0; opacity: 1; transition: bottom 400ms, opacity 400ms; }
#modal.hidden{bottom: -300px; opacity: 0}

Then in button click event:


On close event:


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download