Verzögerung für beforeunload Javascript

Question

Ich versuche, Verzögerung auf Fenster onbeforeunload Skript hinzuzufügen. Ich habe eine CSS-Animation für 0,3 Sekunden und benötigt 0,3 Sekunden Verzögerung vor dem Entladen Seite. Ist es möglich? Mein Beispielcode ist hier;

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

Answer 1

Okay, was ich bemerkte, war, dass Sie in der Lage sind, die erforderliche CSS-Animation zu replizieren, während Sie eine Ankerverknüpfung durchlaufen oder eine Seite aktualisieren/neu laden. Sie können jedoch nicht denselben Effekt zum Schließen der Browser-Registerkarte wiederholen. Ich nehme an, dass es einige Einschränkungen gibt.

Bitte beachten: https://developer.mozilla.org/en-US/docs/Web/Events/unload. Und der Link über beforeunload Ereignis innerhalb.

Answer 2

Die Antwort auf What are the limitation using before unload event? erklärt, dass:

Der einzige Weg, um Ihre Funktion zu gewährleisten, wird vollständig ausgeführt ist synchronen Code, um sicherzustellen, sind schriftlich, dass blockiert die Veranstaltung

In dieser Insbesondere würden die Klassen angewendet, aber CSS-Übergänge würden höchstwahrscheinlich nicht angezeigt, da sie vollständig vom JavaScript-Aufruf getrennt sind und nicht blockieren.

Wenn Sie möchten, dass Ihre Animationen angezeigt werden, müssen Sie wahrscheinlich entweder eine JavaScript-Funktion auslösen, die für die Dauer Ihrer Animation ausgeführt wird, aber keine CSS-Animationen stoppt oder Ihre Animation in eine JavaScript-Funktion ändert oder Bibliothek statt.

Ich hatte Erfolg mit einer Reihe von Websites mit jQuery-Animationen. In Ihrem Fall könnte es so ähnlich aussehen:

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