Wie kann ich CSS-Übergänge in JavaScript zuverlässig deaktivieren?

Die Herausforderungen von CSS-Übergängen meistern

Im Bereich der Webentwicklung kann das vorübergehende Deaktivieren von CSS-Übergangseffekten eine Herausforderung darstellen. Obwohl es einfach erscheinen mag, einfach eine CSS-Klasse umzuschalten, greift dieser Ansatz aufgrund der Browseroptimierung oft zu kurz.

Die Lösung: Eine Klasse ohne Übergang und erzwungener Reflow

Um Übergänge effektiv zu deaktivieren, Eine CSS-Klasse kann verwendet werden, um mithilfe des Flags !important alle Übergangseigenschaften auf „Keine“ zu setzen. Allerdings besteht diese Klasse darin, einen Reflow des Elements zu erzwingen, nachdem seine CSS-Eigenschaften geändert wurden. Durch diese Aktualisierung werden die ausstehenden CSS-Änderungen gelöscht und sichergestellt, dass der Übergang deaktiviert ist. Eine zuverlässige Methode ist der Zugriff auf die offsetHeight-Eigenschaft des Elements.

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

JavaScript-Implementierung

Ohne jQuery:

Mit 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

Vorbehalte

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

Stellen Sie sicher, dass !important ausreicht, um vorhandene Stile zu überschreiben. Wenn nicht, sollten Sie die Verwendung von element.style.setProperty in Betracht ziehen, um Übergänge manuell zu deaktivieren und wieder zu aktivieren. Herstellerpräfixe können weggelassen werden, da die meisten modernen Browser Übergänge ohne diese unterstützen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Übergänge in JavaScript zuverlässig deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!