延迟前载Javascript

Question

我正在尝试向窗口onbeforeunload脚本添加延迟。我有一个0.3秒的CSS动画，卸载页面前需要0.3秒的延迟。可能吗？我的示例代码在这里;

window.onbeforeunload = function (event) {
    $('.page-loader').removeClass("page-loader--hidden").addClass("page-loader--fading-in");
};

Answer 1

好的，我注意到你可以在遍历锚链接或刷新/重新加载页面时复制所需的CSS动画。但是，您无法重复关闭浏览器选项卡的相同效果。我猜这有一些限制。

请参阅：https://developer.mozilla.org/en-US/docs/Web/Events/unload。并且，关于beforeunload事件的链接。

Answer 2

What are the limitation using before unload event?的答案解释了：

  

保证功能完成的唯一方法是确保您编写阻止事件的同步代码

在这个特定的例子中，将应用这些类，但是css过渡很可能不会显示，因为它们与javascript调用完全分开并且没有阻塞。

如果您希望显示动画，那么您很可能需要触发在动画期间运行的javascript函数，但不会停止css动画，或者将动画更改为javascript功能或库代替。

我通过使用jQuery动画在许多网站上取得了成功。在您的情况下，它可能看起来类似于：

window.onbeforeunload = function(){
    $('.page-loader').removeClass("page-loader--hidden").hide().fadeIn(300);
};