Verhindern Abspielen von Animationen in verschiedenen Divs (mit demselben Animationseffekt) Laden in verschiedenen Bildschirmgrößen

Question

Ich habe eine Zielseite, die drei Divs verwendet. Von dreien wird nur ein Div bei einer bestimmten Bildschirmgröße angezeigt. Jeder div lädt auf einer bestimmten Bildschirmgröße mithilfe von Medienabfragen.

Div1 ---> bis 800px Breite

Div2 ---> Zwischen 801px bis 1400px Breite

div3 ---> Über 1400px Breite

jedes Mal laden die Seite mit dem Hintergrundbild in meinem div Wechsel von einem Schwarz-Weiß-Bild in ein Farbbild mit den CSS-Filtern

Das Problem entsteht, wenn ich die Größe meiner Fenster. Zum Beispiel, wenn ich mein Fenster auf eine kleinere Bildschirmgröße/Fenstergröße skaliere; Div2 wird zur Anzeige gebracht: none und Div1 ist jetzt sichtbar. Als Ergebnis, da das div geladen ist, lädt es den CSS-Filtereffekt "Schwarz-Weiß-zu-Farbe" erneut. Dieser Effekt sollte jedoch nur einmal während des Ladens der Seite abgespielt werden und nicht, wenn der Browser die Größe ändert oder wenn mein iPad gedreht wird (die Bildschirmbreite erhöht sich).

Kann mir jemand eine Lösung dafür vorschlagen. Ich habe darüber nachgedacht, die Wiedergabe von Animationen nach einer bestimmten Zeit zu verhindern (die Zeit, die die Hintergrundanimation beim Laden der Seite benötigt). Kann mir jemand sagen, wie dies getan werden kann oder mit einer besseren Lösung helfen

Answer 1

Ein Weg, es zu tun könnte eine CSS-Klasse .animate auf Elternelement hinzufügen und entfernen Sie diese Klasse, sobald CSS-Filterübergang beendet. Es könnte über transitionend Ereignis geschehen. Mehr dazu hier: https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/ Dann könnten Sie in Ihrem CSS CSS-Filter-Effekt nur auf Selektor erstellen.