Wie kann ich CSS-Übergänge während der DOM-Manipulation vorübergehend deaktivieren?

So deaktivieren Sie vorübergehend CSS-Übergangseffekte

Bei der Arbeit mit DOM-Elementen, auf die CSS-Übergänge angewendet werden, kann es Situationen geben, in denen dies erforderlich ist Deaktivieren Sie diese Effekte vorübergehend, um eine reibungslose Größenänderung zu ermöglichen. In diesem Artikel wird die eleganteste Lösung untersucht, um dies zu erreichen.

Übergänge deaktivieren

Um CSS-Übergänge effektiv zu deaktivieren, können Sie eine „notransition“-Klasse wie diese erstellen:

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

Implementierung mit JavaScript

Es gibt zwei Möglichkeiten Wenden Sie die Klasse „notransition“ mit JavaScript an:

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

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

Das Problem beim Deaktivieren von Übergängen besteht darin Browser puffern Stiländerungen, bis die JavaScript-Ausführung abgeschlossen ist, und wenden sie in einem einzigen „Reflow“ an. Dies kann zu unerwünschten Animationen führen. Um einen Reflow zu erzwingen und die CSS-Änderungen zu löschen, müssen Sie die offsetHeight-Eigenschaft des Elements lesen.

Zusätzliche Hinweise

• Stellen Sie sicher, dass „!important“ ausreicht Gewicht, um vorhandene Stile zu überschreiben.
• Berücksichtigen Sie vom Hersteller vorgegebene Eigenschaften für den Browser Kompatibilität.
• Diese Lösung ist für Browser geeignet, die Übergänge unterstützen. Beachten Sie jedoch, dass dies nicht bei allen Browsern der Fall ist.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Übergänge während der DOM-Manipulation vorübergehend deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!