gpt4 book ai didi

javascript - CSS 过渡不会在卸载前触发

转载 作者:太空宇宙 更新时间:2023-11-03 21:41:24 25 4
gpt4 key购买 nike

我有一个疯狂的客户,她希望在她网站上卸载的每个页面上都有一个大的 CSS 转换。

此 Fiddle 按预期工作,具有延迟、缓动和持续时间:http://jsfiddle.net/kLW4C/

然而,当我尝试在此处实现完全相同(我认为)的代码时:http://nolaflash.com/transition.html转换不会发生。

页面代码如下。为什么它在 Fiddle 中起作用而不在页面中起作用?

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

最佳答案

beforeunload 应该用于提示。

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

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

关于javascript - CSS 过渡不会在卸载前触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23274014/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com