Question

我有一个坚定的客户，他希望在她的网站上卸载每个页面时进行大量的CSS转换。

这个小提琴符合预期的延迟，缓和和持续时间：http://jsfiddle.net/kLW4C/

但是，当我尝试在此处实现完全相同的（我认为）代码时：http://nolaflash.com/transition.html不会发生转换。

页码如下。为什么它在小提琴中起作用而不在页面中？

<!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>

Answer 1

beforeunload 应该用于提示。

根据规范，如果要卸载页面，则“salvageable”标志设置为FALSE，这可能是阻止您转换的原因。

请参阅：http://dev.w3.org/html5/spec-LC/history.html#unloading-documents

Answer 2

您可以通过阻止所有链接行为直到页面转换结束，然后前进到下一页来完成此操作。虽然我和你在一起，但我不一定会推荐这种行为。

<!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>

Answer 3

您的问题有一个解决方法。以下代码适用于单个锚点。类似地，您可以使用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>

CSS转换不会触发onbeforeunload

3 个答案:

CSS转换不会触发onb​​eforeunload

3 个答案:

CSS转换不会触发onbeforeunload