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

Kate 发表于 Dev

凯特

当用户关闭浏览器窗口或尝试刷新时，将在浏览器的默认对话框后面弹出一个模式。但是，如果我尝试将动画应用到模态（例如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>

这是页面的实时示例：页面上的模态关闭

如果我将Jquery从fadeIn更改为简单的“ show”，则模式将与默认对话框同时显示。因此，我假设动画正在排队。但是，我看到了这样的情况，其中模式将其滑入默认对话框后的页面背景。

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

沃尔夫

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

这是一个简单的示例，在beforeunload处理程序中打开一个类以打开CSS3 fadeIn转换：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-19

我来说两句

0条评论

登录后参与评论

来自分类Dev