Wie kann ich CSS-Übergänge in JavaScript effizient deaktivieren und wieder aktivieren?

CSS-Übergänge deaktivieren und wieder aktivieren

In einer typischen Webanwendung können DOM-Elemente verschiedenen CSS-Übergängen unterliegen. Es kann jedoch vorkommen, dass Sie diese Effekte bei bestimmten Vorgängen vorübergehend deaktivieren müssen, z. B. bei der Größenänderung eines Elements.

Elegantes Deaktivieren und erneutes Aktivieren

Auf elegante Weise Wenn Sie CSS-Übergänge deaktivieren und wieder aktivieren, können Sie eine Kombination aus CSS und JavaScript verwenden.

CSS Klasse:

Erstellen Sie eine „notransition“-CSS-Klasse, um die Übergangseigenschaften eines Elements zu überschreiben:

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

JavaScript:

Ohne jQuery:

const someElement = document.getElementById("some-element");

// Disable transitions
someElement.classList.add('notransition');

// Perform CSS changes
doWhateverCssChangesYouWant(someElement);

// Trigger a reflow
someElement.offsetHeight;

// Re-enable transitions
someElement.classList.remove('notransition');

Mit jQuery:

const $someElement = $('#some-element');

// Disable transitions
$someElement.addClass('notransition');

// Perform CSS changes
doWhateverCssChangesYouWant($someElement);

// Trigger a reflow
$someElement[0].offsetHeight;

// Re-enable transitions
$someElement.removeClass('notransition');

Erklärung:

1. Fügen Sie die Klasse „notransition“ hinzu, um Übergänge zu deaktivieren.
2. Wenden Sie alle gewünschten an CSS-Änderungen am Element.
3. Lösen Sie einen erzwungenen Reflow aus, indem Sie die OffsetHeight des Elements lesen Eigenschaft.
4. Entfernen Sie die Klasse „notransition“, um Übergänge wieder zu aktivieren.

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