Kann JavaScript CSS-Animationsparameter dynamisch ändern?

CSS-Animationen mit JavaScript parametrisieren

Frage:

Im bereitgestellten CSS-Animationscode ist eine dynamische Änderung möglich die Werte für margin-left und width durch JavaScript?

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Antwort:

Ja, es gibt eine Möglichkeit, Werte aus JavaScript an CSS-Animationen zu übergeben, indem CSS-Variablen verwendet werden.

.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%;
  }
}

JavaScript:

// Set CSS variables using JavaScript
document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');

Dieser Ansatz ermöglicht es Ihnen, die Animationsparameter dynamisch über JavaScript zu steuern, was eine größere Flexibilität ermöglicht Anpassung.

Das obige ist der detaillierte Inhalt vonKann JavaScript CSS-Animationsparameter dynamisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!