Css Transition Property On Page Exit

I need a few objects on my pages to animate out when a user clicks a link. I want each object to scale and fade out but not all objects such as the navigation buttons. I was thinki

Solution 1:

Look at the JS event window.onbeforeunload

https://developer.mozilla.org/en-US/docs/Web/API/window.onbeforeunload

It will hopefully be enough to just run the exit animations when this function is triggered - it generally takes the browser around a second to unload the page completely but this varies depending on your browser, page size and cpu speed.

Assuming you're using plain JS and you know how to do CSS transitions, the simple way to make animations occur on page exit is something like this:

window.onbeforeunload = function(e){
    document.getElementById('myDiv').className = 'out';
}

Where myDiv id the element you want to animate and out is the CSS class representing the final stage of your transition.

Here is a JSfiddle: http://jsfiddle.net/X5vKS/

If you need finer control over the wait time, you could use the onbeforeunload function with setTimeout to delay the page exit by the length of time of your animation. This is slightly complex for a JS beginner but is quite doable.