延遲之前卸載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調用並且不被阻止。

如果您希望顯示動畫，那麼您很可能需要觸發一個在動畫期間運行但不會停止css動畫的javascript函數，或者將動畫更改爲javascript函數或者庫。

我已經通過使用jQuery動畫取得了許多網站的成功。在你的情況下，它可能看起來像這樣：

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