Comment puis-je déclencher des animations CSS avec du JavaScript pur ?

Déclenchez des animations CSS en JavaScript

Dans le développement Web, les animations CSS fournissent des effets visuellement dynamiques aux pages Web. Cependant, déclencher ces animations à l’aide de JavaScript peut constituer un défi courant. Pour ceux qui préfèrent ne pas utiliser jQuery, ce guide propose une solution pour déclencher des animations CSS uniquement via JavaScript.

Une approche efficace consiste à utiliser la manipulation de classe. En ajoutant ou en supprimant des classes à un élément HTML, vous pouvez déclencher des animations CSS spécifiques. En JavaScript, cela peut être réalisé via la propriété className de l'objet HTMLElement.

Pour démontrer, considérons l'exemple suivant :

function start() {
  document.getElementById('logo').classList.add('animate');
}

Dans ce script, la fonction start est invoquée lorsque le l'élément du logo est cliqué. Il ajoute la classe 'animate' à l'élément.

Pour cibler l'animation CSS, créez une règle CSS correspondante pour la classe 'animate' :

.animate {
  animation: my-animation 2s forwards;
}

Dans cette règle CSS, le L'animation 'my-animation' sera appliquée à n'importe quel élément avec la classe 'animate'.

Une autre méthode consiste à utiliser la propriété style de l'objet HTMLElement. Cela permet une manipulation directe des styles en ligne de l'élément. Pour déclencher une animation en utilisant cette approche :

document.getElementById('logo').style.animation = 'my-animation 2s forwards';

Comme précédemment, définissez l'animation 'mon-animation' dans votre CSS pour spécifier le comportement de l'animation.

Enfin, pour les animations complexes impliquant un défilement , vous pouvez utiliser l'écouteur d'événement scroll :

window.addEventListener('scroll', () => {
  if (window.scrollY >= 100) {
    document.getElementById('logo').classList.add('animate');
  }
});

Dans cet exemple, l'animation démarre lorsque l'utilisateur fait défiler au-delà de 100 pixels. Notez que cette méthode nécessite que vous spécifiiez l'animation CSS avec une règle d'image clé qui se déclenche à la position de défilement.

Grâce à ces techniques, vous pouvez désormais déclencher des animations CSS de manière dynamique en utilisant du JavaScript pur, ouvrant ainsi un large éventail de possibilités de création. applications Web visuellement attrayantes.

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!