Comment puis-je transmettre des paramètres aux animations CSS à l'aide de JavaScript ?

Passer des paramètres à l'animation CSS avec JavaScript

Dans le développement Web moderne, les animations CSS jouent un rôle crucial en apportant des effets et des interactions dynamiques aux interfaces utilisateur. Cependant, cela peut être limitant lorsque vous souhaitez contrôler dynamiquement les propriétés d'animation en fonction de données externes ou d'entrées utilisateur.

Considérez le code d'animation CSS suivant :

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

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

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

Cette animation anime un élément coulissant du côté droit. Cependant, les valeurs de marge gauche et de largeur sont codées en dur. Si nous souhaitons personnaliser ces valeurs en fonction d'exigences spécifiques, nous avons besoin d'un moyen de les transmettre en tant que paramètres.

Présentation des variables CSS, une fonctionnalité puissante qui nous permet de manipuler les propriétés CSS à l'aide de JavaScript. Avec les variables CSS, nous pouvons réaliser un paramétrage d'animation dynamique comme suit :

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

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

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

Remarquez l'utilisation de var(--m, 0%) et var(--w, 100%) dans l'animation. En JavaScript, nous pouvons maintenant définir ces variables sur les valeurs souhaitées et déclencher l'animation :

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

Ce code JavaScript simple définit les variables --m et --w pour l'élément avec la classe "p2". En conséquence, l'élément glissera du côté droit avec les valeurs de marge gauche et de largeur spécifiées.

En combinant des variables CSS et JavaScript, nous pouvons désormais contrôler les paramètres d'animation par programme, ouvrant ainsi des possibilités infinies de dynamique. et des interfaces utilisateur réactives.

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!