Search code examples
javascriptcsscss-transitionsonbeforeunload

CSS Transition Does Not Fire onbeforeunload

I have a nutty client who'd like a large CSS transition on every page unload on her site.

This Fiddle works as intended with the delay, easing, and duration: http://jsfiddle.net/kLW4C/

However when I try to implement the exact same (I think) code here: http://nolaflash.com/transition.html the transition does not occur.

Page code is as follows. Why does it work in the Fiddle and not in the page?

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<script type="text/javascript">//<![CDATA[ 
    window.onload=function(){
        window.onbeforeunload = function (e) {
            document.getElementById('myLink').className = 'out';
        }
    }//]]>
</script>

<style type="text/css">
#myLink {
    display:block;
    padding:20px;
    background:#CCC;
    transition-property: background color;
    transition-duration: 12.5s;
    transition-timing-function: ease;
    transition-delay: 6.5s;
}
#myLink.out {
    background:#CC0000;
}
</style>
</head>

<body id="bod" class='in'>

<a href='https://www.google.com' id='myLink'>click me and watch me go red before the page unloads</a>

</body>
</html>
Solution

  • beforeunload is supposed to be used for a prompt.

    According to the spec, if the page is to be unloaded the "salvageable" flag is set to FALSE, which is likely the cause preventing your transition.

    See: http://dev.w3.org/html5/spec-LC/history.html#unloading-documents