Javascript CSS转换不会在卸载前启动
我有一个疯狂的客户，她希望在她的站点上卸载每个页面上的大型CSS转换 此小提琴按预期的延迟、缓和和持续时间工作： 然而，当我尝试在这里实现完全相同的（我认为）代码时：转换不会发生 页面代码如下。为什么它在小提琴中起作用而不在书页中起作用Javascript CSS转换不会在卸载前启动,javascript,css,css-transitions,onbeforeunload,Javascript,Css,Css Transitions,Onbeforeunload,我有一个疯狂的客户，她希望在她的站点上卸载每个页面上的大型CSS转换 此小提琴按预期的延迟、缓和和持续时间工作： 然而，当我尝试在这里实现完全相同的（我认为）代码时：转换不会发生 页面代码如下。为什么它在小提琴中起作用而不在书页中起作用 <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript">//<![CDATA[
<!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>
//
#myLink{
显示：块；
填充：20px；
背景：#CCC；
过渡特性：背景色；
过渡时间：12.5s；
过渡时间功能：轻松；
过渡延迟：6.5s；
}
#我的链接{
背景：#CC0000；
}
请参阅：beforeunload应用于提示 根据规范，如果页面要卸载，则“可回收”标志设置为FALSE，这可能是阻止转换的原因
请参阅：您可以通过阻止所有链接行为来完成此操作，直到页面转换结束，然后前进到下一页。虽然我支持你，但我不一定推荐这种行为
<!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>
无标题文件
身体{
过渡期：5s；
}
瑞德先生{
背景：红色；
}
var pageTransition=函数（）{
//保存url供以后使用
var nextLink；
var links=document.querySelectorAll（'a'）；
var body=document.querySelector（'body'）；
//我正在转换主体，您将需要特定于浏览器的侦听器
body.addEventListener（'transitionend'，函数（e）{
//转换后导航到下一页
window.location=nextLink；
});
//禁用所有链接，保存url供以后使用
对于（i=0；i您可以通过阻止所有链接行为直到页面转换结束，然后前进到下一页来实现这一点。虽然我同意您的观点，但我不一定推荐这种行为
<!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>
无标题文件
身体{
过渡期：5s；
}
瑞德先生{
背景：红色；
}
var pageTransition=函数（）{
//保存url供以后使用
var nextLink；
var links=document.querySelectorAll（'a'）；
var body=document.querySelector（'body'）；
//我正在转换主体，您将需要特定于浏览器的侦听器
body.addEventListener（'transitionend'，函数（e）{
//转换后导航到下一页
window.location=nextLink；
});
//禁用所有链接，保存url供以后使用
对于（i=0；i您的问题有一个解决方法。以下代码适用于单个锚。类似地，您可以使用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>
#myLink{
显示：块；
填充：20px；
背景：#CCC；
过渡特性：背景色；
过渡时间：4.5s；
过渡时间功能：轻松；
过渡延迟：1.5s；
}
#我的链接{
背景：#CC0000；
}
函数makeDelay（obj）{
setTimeout（函数（）{
window.location.href=obj.href；
},5000);
document.getElementById（'myLink'）。className='out'；
返回false；
}
您的问题有一个解决方法。以下代码适用于单个锚。类似地，您可以使用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>
#myLink{
显示：块；
填充：20px；
背景：#CCC；
过渡特性：背景色；
过渡时间：4.5s；
过渡时间功能：轻松；
过渡延迟：1.5s；
}
#我的链接{
背景：#CC0000；
}
函数makeDelay（obj）{
setTimeout（函数（）{
window.location.href=obj.href；
},5000);
document.getElementById（'myLink'）。className='out'；
返回false；
}
你的jsfiddle
在Firefox
上对我不起作用
在您的窗口内。onbeforeunload
也不会启动。奇怪的是，这个更快的版本在FF中工作，我想onbeforeunload不会等待转换。那一个jsfiddle.net/X5vKS起作用了。您的jsfiddle
在Firefox
上对我不起作用。如果我发出警报（）
在您的窗口内。onbeforeunload
也不会启动。奇怪的是，这个更快的版本在FF中工作，我想onbeforeunload不会等待转换。那一个jsfiddle.net/X5vKS起作用了。（所以我想您可以将它转发给您的客户机并保存您的理智）事实证明，如果我不使用延迟，并说300毫秒的持续时间，所有浏览器都会呈现它。因此，延迟和持续时间是由卸载阻止的-onbeforeunload没有等待它们完成。希望客户端理解并接受这是不可能的（：我想她会大发雷霆。但是如果我使用jQuery为所有链接添加一个超时，我可以简单地用它来购买播放她想要的动画覆盖的时间。对用户的好处是：不那么无用。（所以我想你可以将它转发给你的客户并保存你的理智）事实证明，如果我不使用延迟，并说300毫秒的持续时间，所有浏览器都会呈现它。因此，延迟和持续时间是由卸载阻止的-onbeforeunload没有等待它们完成。希望客户端理解并接受这是不可能的（：我想她会大发雷霆。但是如果我使用jQuery为所有链接添加一个超时，我可以简单地用它来购买播放她想要的动画叠加的时间。对用户的好处是：不那么无用。