Warum funktionieren meine CSS-Übergänge nicht, wenn sie über JavaScript angewendet werden?

CSS-Übergänge werden nicht angewendet, wenn sie über JavaScript zugewiesen werden

Obwohl CSS3-Übergänge mit JavaScript angewendet werden, funktionieren sie nicht wie erwartet. Dieses Problem tritt auf, wenn CSS-Klassen dynamisch zugewiesen werden, die Übergangseigenschaften enthalten.

Um Übergänge effektiv auszulösen, sind die Voraussetzungen:

• Explizite Definition der Eigenschaft (z. B. Deckkraft: 0;)
• Definierter Übergang (z. B. Übergang: Deckkraft 2s;)
• Festlegen der neuen Eigenschaft (z. B. Deckkraft: 1;)

In JavaScript liegt das Problem an die Verarbeitungszeit des Browsers. Zuerst müssen die richtigen Stile angewendet werden, gefolgt von einer kleinen Verzögerung, bevor die für den Übergang verantwortliche CSS-Klasse festgelegt wird. Diese Verzögerung ermöglicht es dem Browser, die angewendeten Stile zu registrieren, bevor der Übergang angewendet wird.

Um diese Verzögerung zu implementieren, verwenden Sie window.setTimeout(), um das Hinzufügen der CSS-Klasse, die den Übergang enthält, zu verschieben:

<code class="js">window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);</code>

Alternativ können Sie eine übergangsauslösende Klasse (target-fadein-begin) in den HTML-Code einbinden, wenn dieser geladen wird:

<code class="html"><div class="fadeable target-fadein-begin"></div></code>

Durch die Erfüllung dieser Kriterien können durch JavaScript ausgelöste CSS-Übergänge wie erwartet funktionieren nahtlose Animationen.

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