Wie kann ich CSS-Übergangseffekte für eine reibungslose Größenänderung von Elementen vorübergehend deaktivieren?

CSS-Übergangseffekte vorübergehend deaktivieren

In der Webentwicklung ist es häufig erforderlich, CSS-Übergangseffekte zu deaktivieren, wenn Änderungen an einem Element vorgenommen werden, um eine reibungslose Größenänderung oder Anpassung des Erscheinungsbilds sicherzustellen. Hier ist die eleganteste Lösung:

Lösung

Erstellen Sie eine CSS-Klasse:

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

Verwenden Sie JavaScript (ohne jQuery):

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions

Verwenden Sie JavaScript mit jQuery:

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
$someElement.removeClass('notransition'); // Re-enable transitions

Erklärung:

Diese Lösung verwendet eine CSS-Klasse, um alle vorhandenen Übergangseinstellungen mit !important zu überschreiben. Anschließend fügt es die Klasse zum Element hinzu, nimmt die gewünschten CSS-Änderungen vor, erzwingt einen Reflow mithilfe von offsetHeight und entfernt schließlich die Klasse, um Übergänge wieder zu aktivieren.

Überlegungen

• Stellen Sie dies sicher .notransition überschreibt bestehende Regeln (erwägen Sie die Verwendung von !important im CSS).
• Erzwingen Sie einen Reflow nach der Deaktivierung Übergänge durch Lesen von offsetHeight oder Verwendung einer anderen geeigneten Methode.
• Diese Lösung funktioniert browserübergreifend und ist die eleganteste Methode, um CSS-Übergangseffekte vorübergehend zu deaktivieren.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Übergangseffekte für eine reibungslose Größenänderung von Elementen vorübergehend deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!