Question
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?
https://stackoverflow.com/questions/23274014
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!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
OTHER TIPS
You could do this by blocking all link behavior until the page transition ends, then advancing to the next page. Though I'm with you, I wouldn't necessarily recommend this behavior.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
transition: 5s;
}
.red {
background: red;
}
</style>
</head>
<body>
<a href="http://www.google.com">test</a>
<script>
var pageTransition=function(){
// save url for later
var nextLink;
var links=document.querySelectorAll('a');
var body=document.querySelector('body');
// I was transitioning the body, you'll need browser-specific listeners
body.addEventListener('transitionend', function(e){
// navigate to next page after transition
window.location=nextLink;
});
// disable all links, save url for later
for(i=0; i<links.length; i++){
links[i].addEventListener('click', function(e){
nextLink=e.target.href;
body.className+=" red";
e.preventDefault();
});
}
}();
</script>
</body>
</html>
There is a workaround for your problem. Following code works for a single anchor. Similarly you can bind event to all anchors on the same page with jquery.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#myLink {
display:block;
padding:20px;
background:#CCC;
transition-property: background color;
transition-duration: 4.5s;
transition-timing-function: ease;
transition-delay: 1.5s;
}
#myLink.out {
background:#CC0000;
}
</style>
</head>
<script>
function makeDelay(obj){
setTimeout(function(){
window.location.href = obj.href;
},5000);
document.getElementById('myLink').className = 'out';
return false;
}
</script>
<body id="bod" class='in'>
<a href='http://www.bing.com' id='myLink' onClick="makeDelay(this);return false;">click me and watch me go red before the page unloads</a>
</body>
</html>
