Warum schlagen CSS-Übergänge fehl, wenn sie über JavaScript angewendet werden?

CSS-Übergänge bei Zuweisung über JavaScript korrigieren

Beim Versuch, CSS3-Übergänge über JavaScript anzuwenden, kann es vorkommen, dass die angegebenen Übergänge fehlschlagen auszuführen, obwohl die richtigen Stile angewendet wurden. Dieses Verhalten kann rätselhaft sein, insbesondere wenn die Übergänge funktionieren, wenn sie direkt über den Inspektor des Browsers angewendet werden.

Die zugrunde liegende Ursache

Um das Problem vollständig zu verstehen, muss man die verstehen Mechanik von CSS-Übergängen. Damit ein Übergang wirksam wird, müssen drei entscheidende Schritte ausgeführt werden:

1. Für das Zielelement muss die Übergangseigenschaft explizit definiert sein (z. B. Übergang: Deckkraft 2s;).
2. Das Element muss den Anfangswert für die Übergangseigenschaft haben (z. B. Deckkraft: 0;).
3. Der neue Wert für die Übergangseigenschaft muss angewendet werden (z. B. Deckkraft: 1;).

Wenn JavaScript Klassen dynamisch zuweist, wie im Fall des bereitgestellten Beispiels, besteht ein potenzielles Problem. Der Browser benötigt Zeit, um diese Änderungen zu verarbeiten, und die dynamische Zuweisung der Zielklasse (z. B. „.target-fadein“) sorgt möglicherweise nicht für die erforderliche Verzögerung.

Lösung

Um dieses Problem zu lösen, ist eine Verzögerung vor der Zuweisung der Zielklasse erforderlich. Dadurch wird sichergestellt, dass der Browser genügend Zeit hat, die Übergangseigenschaft anzuwenden und sich auf die Animation vorzubereiten. Der folgende Codeausschnitt veranschaulicht die Verwendung einer Verzögerung beim Anwenden der Zielklasse:

window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);

Alternativ können Sie die Zielklasse „.target-fadein-begin“ direkt in den HTML-Code einfügen, damit sie analysiert wird geladen und bereit für den Übergang.

Zusätzliche Einblicke

Es ist wichtig zu erkennen, dass das einfache Hinzufügen eines Übergangs zu einem Element nicht die Animation auslöst. Die eigentliche Animation wird durch Ändern des Werts der Übergangseigenschaft ausgelöst. Dies erklärt, warum das manuelle Festlegen der anfänglichen und neuen Eigenschaftswerte im Inspektor funktioniert.

Zur weiteren Verdeutlichung betrachten Sie den folgenden Codeausschnitt:

// Works
document.getElementById('fade1').className += ' fade-in'

// Doesn't work
document.getElementById('fade2').className = 'fadeable'
document.getElementById('fade2').className += ' fade-in'

// Works
document.getElementById('fade3').className = 'fadeable'

window.setTimeout(function() {
  document.getElementById('fade3').className += ' fade-in'
}, 50)

In diesem Szenario funktioniert der erste Block, weil Alle drei Bedingungen für einen Übergang sind erfüllt. Für das Element ist ein Übergang definiert, die anfängliche Deckkraft ist auf 0 und die neue Deckkraft auf 1 gesetzt. Der zweite Block schlägt fehl, weil der anfängliche Deckkraftwert nicht explizit definiert ist, bevor die Übergangsklasse angewendet wird. Der dritte Block funktioniert, weil eine Verzögerung es dem Browser ermöglicht, die Anfangswerteinstellung zu verarbeiten, bevor der Übergang angewendet wird.

Das obige ist der detaillierte Inhalt vonWarum schlagen CSS-Übergänge fehl, wenn sie über JavaScript angewendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!