运行页面 unload/browser 关闭前的动画

Question

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

我正在使用 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 从淡入更改为简单的 'show'，模式将与默认对话同时出现。所以我假设动画正在排队。但是，我已经看到模态滑入默认对话框后面的页面背景时完成的。

知道如何让动画播放 before/while 对话框打开了吗？如果我不能使用 Jquery 来制作动画，CSS3 动画也可以。

Answer 1

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

这是一个简单的示例，在 beforeunload 处理程序中打开 class 以打开 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!");  
});

运行页面 unload/browser 关闭前的动画

Run animation before page unload/browser close

css

jquery

animation

onbeforeunload

-jsFiddle-

运行 页面 unload/browser 关闭前的动画

Run animation before page unload/browser close

css

jquery

animation

onbeforeunload

-jsFiddle-

运行页面 unload/browser 关闭前的动画