Animationen beim Ändern der Fenstergröße stoppen

Nehmen wir an, Sie haben eine Seite mit vielen Übergängen und Animationen auf verschiedenen Elementen. Einige davon werden beim Ändern der Fenstergröße ausgelöst, da sie mit der Größe der Seite, der Position, dem Padding oder ähnlichem zu tun haben. Es spielt keine Rolle, was es ist, die Tatsache, dass der Übergang oder die Animation ausgeführt wird, kann zu einem Gefühl der Ruckeligkeit beim Ändern der Fenstergröße beitragen. Wenn diese Übergänge oder Animationen in diesen Szenarien keinen Nutzen bringen, können Sie sie ausschalten!

Der Trick besteht darin, eine Klasse anzuwenden, die alle Übergänge und Animationen universell abschaltet.

let resizeTimer;
window.addEventListener("resize", () => {
  document.body.classList.add("resize-animation-stopper");
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    document.body.classList.remove("resize-animation-stopper");
  }, 400);
});

Jetzt haben wir eine resize-animation-stopper-Klasse im <body>, die jede Übergangs- oder Animationsdauer während der Fenstergrößenänderung erzwingen kann und nach Ablauf des Timeouts verschwindet.

.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}

Es gibt wahrscheinlich eine leistungsfähigere Methode als setTimeout, aber das ist das Konzept. Ich verwende dies hier auf dieser Website (v17), nachdem ich erhebliche Ruckler bei der Größenänderung bemerkt habe. Es hat die Ruckler nicht vollständig beseitigt, aber es ist merklich besser.

Hier ist ein Beispiel:

Siehe den Pen
Animation beim Ändern der Größe deaktivieren? von Chris Coyier (@chriscoyier)
auf CodePen.

Dieses Demo ist hauptsächlich für den funktionierenden Code gedacht. Es gibt wahrscheinlich nicht genug Übergänge, um viele Ruckler beim Ändern der Größe zu bemerken.

Kommentare

Russell Bishop

# 14. Oktober 2019

Wäre es nicht besser, animation-play-state auf paused zu setzen?

Chris Coyier

Permalink zum Kommentar# 14. Oktober 2019

Vielleicht? Ich nehme an, wenn das ausgeschaltet wird, ist eine tatsächliche animation, würde sie dort fortfahren, wo sie aufgehört hat? Scheint eine gute Idee zu sein. Ich denke dabei weniger, da ich wetten würde, dass 95 % dessen, was ich in CSS als animation bezeichne, Übergänge sind.

Omer Okcuoglu

# 14. Oktober 2019

Anstatt sich auf setTimeout mit einer willkürlichen Zeit zu verlassen, können Sie die Animation nicht mit einem body:hover EventListener wieder aktivieren, der mit einem Resize-Ereignis gesetzt wird?

Davor Suljic

# 15. Oktober 2019

Ich habe eine reine CSS-Lösung erstellt, bei der animation-play-state im Hover-Zustand des gesamten Seiten-Wrappers aktiviert wird. Wenn die Maus außerhalb des Fensters ist (z. B. während der Fenstergrößenänderung) wird die Animation gestoppt.

:root {
  --playing-state: paused;
}

#main-wrapper:hover {
  --playing-state: running;
}

.anim {
  ...
  animation: simpleAnim 2s linear infinite alternate;
  animation-play-state: var(--playing-state);
}

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.