Wie kann ich JavaScript-Variablen an CSS-Animationen übergeben?

Übergabe von Variablen an CSS-Animationen mit JavaScript

Bei der Arbeit mit CSS-Animationen kann die Möglichkeit, Werte als Parameter aus JavaScript zu übergeben, unglaublich nützlich sein. Dies ermöglicht ein dynamisches und interaktives Erlebnis.

Lösung: CSS-Variablen

In CSS ermöglicht die Verwendung von Variablen die Übergabe von Werten von JavaScript an Animationen. Zum Beispiel:

.p1, .p2 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
    width: var(--w, 100%);
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

Implementierung in JavaScript

Mit JavaScript können Sie dann diese Variablen festlegen:

document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');

Beispielverwendung

Dies wird Ändern Sie die Animation des Elements mit der Klasse „p2“:

<p class="p1">
 This will not animate as the animation will use the default value set to the variable
</p>
<p class="p2">
  This will animate because we changed the CSS variable using JS
</p>

Das obige ist der detaillierte Inhalt vonWie kann ich JavaScript-Variablen an CSS-Animationen übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!