在页面卸载/浏览器关闭之前运行动画答案

【问题标题】：Run animation before page unload/browser close在页面卸载/浏览器关闭之前运行动画
【发布时间】：2015-02-04 12:24:04
【问题描述】：

当用户关闭浏览器窗口或尝试刷新时，会在浏览器的默认对话框后面弹出一个模式。但是，如果我尝试对模态应用动画，例如fadeIn或向下滑动，则动画和模态只有在确认默认对话框后才会出现。

我正在使用 Bootstrap 模式。这是我的代码：

HTML：

<div class="modal" id="holidays-leave-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!--content here-->
</div>

jQuery

<script type="text/javascript">

    $(window).bind('beforeunload', function() {

      $( "#holidays-leave-modal" ).fadeIn();      

      return ("Don't leave yet!");  
}); 
</script>

以下是该页面的实时示例： Modal on page close

如果我将 Jquery 从 fadeIn 更改为简单的“显示”，则模式会与默认对话框同时出现。所以我假设动画正在排队。但是，我已经看到在默认对话框后面模态滑入页面背景的情况下这样做了。

知道如何在对话框打开之前/期间播放动画吗？如果我不能使用 Jquery 对其进行动画处理，CSS3 动画也可以。

【问题讨论】：

那是不可能的，主要是因为提示框是模态的，阻塞了任何挂起的脚本执行。也许尝试使用 CSS 动画（例如切换一个类），但我想这不会修复它或每个浏览器处理不同
我知道这是可能的，正如本网站所展示的那样：[majortravel.co.uk] - 搜索航班，然后在您进入结果页面后，尝试关闭窗口...
是的，但就像我说的，他们使用的是 CSS 动画，而不是使用 javascript 的
那我不介意使用 CSS！关于如何执行它的任何提示..？我会在 html 中向模式添加一个类还是用 Jquery 附加该类？
例如：jsfiddle.net/2zmuywv9

标签： jquery css animation onbeforeunload

【解决方案1】：

提示框是模态的，阻止任何挂起的脚本执行。您可以使用 CSS3 动画/过渡，但它无法在所有浏览器上按预期工作（我正在考虑 IOS 上的 safari，即使我目前无法对其进行测试）。

这是一个简单的例子，在 beforeunload 处理程序中打开一个类以打开 CSS3 淡入淡出过渡：

CSS

#fadeLink {
    opacity: 0;
    -webkit-transition: opacity 4s linear;
    -moz-transition: opacity 4s linear;
    -o-transition: opacity 4s linear;
    transition: opacity 4s linear;
}
#fadeLink.fadein {
    opacity: 1;
}

js/jQuery

$(window).bind('beforeunload', function() {

      $( "#fadeLink" ).addClass('fadein');      

      return ("Don't leave yet!");  
});

-jsFiddle-

【讨论】：