Comment puis-je transmettre des variables JavaScript aux animations CSS ?

Passer des variables aux animations CSS avec JavaScript

Lorsque vous travaillez avec des animations CSS, la possibilité de transmettre des valeurs en tant que paramètres à partir de JavaScript peut être incroyablement utile. Cela permet une expérience dynamique et interactive.

Solution : Variables CSS

En CSS, l'utilisation de variables permet de transmettre des valeurs de JavaScript aux animations. Par exemple :

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

Implémentation en JavaScript

À l'aide de JavaScript, vous pouvez ensuite définir ces variables :

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

Exemple d'utilisation

Cela permettra modifier l'animation de l'élément avec la classe "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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!