Warum funktionieren meine JavaScript-zugewiesenen CSS-Übergänge nicht?

JavaScript-zugewiesene CSS-Übergänge funktionieren nicht

Beim Anwenden von CSS3-Übergängen auf eine Diashow über JavaScript kann es zu einem rätselhaften Problem kommen, bei dem die angegebenen Übergänge funktionieren nicht, obwohl die richtigen Stile angewendet werden. Diese Diskrepanz entsteht, weil CSS-Übergänge nur dann ausgelöst werden, wenn sich der Wert der angegebenen Eigenschaft ändert, und nicht, wenn der Übergang ursprünglich definiert wird.

Um dieses Problem zu beheben, stellen Sie sicher, dass die drei folgenden Bedingungen erfüllt sind:

1. Explizite Definition der Eigenschaft: Für das betroffene Element muss die Eigenschaft explizit in ihrem ursprünglichen Stil deklariert sein.
2. Übergangsdefinition: Für das Element muss der gewünschte Übergang definiert sein. B. „Übergang: Deckkraft 2s;“.
3. Änderung des Eigenschaftswerts: Nachdem Sie den Übergang definiert haben, legen Sie den neuen Eigenschaftswert fest und lösen so die Animation aus.

In Ihrem Beispiel funktionierten die Übergänge nicht, da die Änderung des Eigenschaftswerts (Einstellung „Opazität: 1“) erfolgte, bevor der Browser die Möglichkeit hatte, den dynamisch zugewiesenen Übergang zu verarbeiten. Um dies zu beheben, führen Sie eine Verzögerung ein, bevor Sie die Klasse „target-fadein“ zuweisen:

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

Alternativ können Sie die Klasse „target-fadein-begin“ direkt in Ihren HTML-Code einbinden, damit sie beim Laden analysiert werden kann und bereit für den Übergang.

Denken Sie daran, dass die JavaScript-Zuweisung des Übergangs selbst nicht die Animation initiiert; Es ist die Änderung des Immobilienwerts, die den Übergangseffekt auslöst.

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