javascript - 页面退出时的 CSS 过渡

Question

嗨，为什么会这样

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

http://jsfiddle.net/X5vKS/

仅适用于某些链接？它来自一个问题here

在获得 50 名代表之前我不能发表评论。

如果我添加index.html，它会直接链接而无需转换，如果我将完整地址添加到页面www.mywebsite.info/index，它会直接链接并且不进行转换。

但是如果我添加 google.com、yahoo.com 等，它就可以正常工作。

如果有帮助的话，我正在使用 .info 域。

Answer 1

首先，在网站前面的 href 中使用 http://。

由于您没有提供太多详细信息，我认为问题在于您的页面加载速度太快，无法让您看到过渡。我建议你在onbeforeunload函数中添加一个超时。

这会增加 2 秒的超时时间。

window.onbeforeunload = function (e) {

    setTimeout(function(){
        document.getElementById('myLink').className = 'out';
    }, 2000);
}

如果您想在函数结束后等待，请执行此操作 -

window.onbeforeunload = function (e) {

    document.getElementById('myLink').className = 'out';
    setTimeout(function(){
        document.getElementById('myLink').className = '';
    }, 2000);
}

现在，出于安全原因，onbeforeunload 并未提供大量功能，但上面的功能应该可以满足您的需求。

有关 javascript 中的计时事件的更多信息，请阅读此内容 - http://www.w3schools.com/js/js_timing.asp