beforeunloadの遅延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?への答えがあることを説明します。

完了まで実行されますあなたの機能を保証する唯一の方法は、あなたが同期コードを書いていることを確認することである。この内のブロックイベント

特定の例では、クラスが適用されますが、JavaScriptの呼び出しとは完全に分離されており、ブロックされていないため、CSSの遷移はほとんど表示されません。

あなたのアニメーションを表示したい場合は、アニメーションの間実行されるjavascript機能をトリガーする必要がありますが、CSSアニメーションを停止したり、アニメーションをjavascript関数に変更したりする必要がありますまたはライブラリを使用します。

jQueryアニメーションを使用していくつかのサイトで成功しました。あなたの場合、これは次のようになります。

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