jquery arrête l'animation CSS

Dans la production de pages Web, les effets d'animation sont un élément très courant et l'animation CSS est l'une des méthodes les plus populaires. Cependant, dans certains cas, il est nécessaire d'arrêter l'animation CSS en cours. Dans ce cas, jquery doit être utilisé pour y parvenir. Cet article explique comment utiliser jquery pour arrêter l'animation CSS.

1. Qu'est-ce que l'animation CSS

Les effets d'animation en CSS3 sont définis à l'aide des règles @keyframes. Une variété d'effets d'animation peuvent être obtenus en ajoutant des attributs tels que des images clés et la durée de l'animation aux éléments.

Par exemple, on peut définir le code CSS suivant pour implémenter une animation se déplaçant de gauche à droite :

@keyframes move-right {
  0% { left: 0; }
  100% { left: 100px; }
}

#box {
  position: absolute;
  left: 0;
  animation: move-right 2s ease-out forwards;
}

Dans le code ci-dessus, on définit un fichier nommé " move- right", qui définit la propriété de position gauche de l'élément de 0 % à 100 % d'images clés. Ensuite, nous appliquons cette animation à l'élément avec l'identifiant "box", et définissons le temps d'animation sur 2 secondes, l'effet d'accélération sur "ease-out", et enfin conservons l'état final de l'animation sur l'élément.

2. Arrêtez l'animation CSS

Normalement, l'animation CSS bouclera jusqu'à la fin selon le temps d'animation et les règles que nous définissons. Mais parfois, nous devons arrêter l'animation pendant son exécution. Dans ce cas, nous devons utiliser jquery pour y parvenir.

Tout d'abord, nous devons ajouter un bouton ou un autre déclencheur à l'élément qui peut arrêter l'animation, et ajouter un écouteur d'événement sur le déclencheur. Par exemple, dans le code ci-dessous, nous créons un élément div contenant un bouton et ajoutons un écouteur d'événement "click" pour le bouton :

<div id="box" class="animated">
  <button id="stop-btn">停止动画</button>
</div>

Ensuite, nous devons définir un écouteur d'événement jquery, arrête le animation lorsque l'utilisateur clique sur le bouton. Transmettez l'ID de l'élément animé à l'écouteur d'événement, puis utilisez la méthode "stop()" de jquery pour arrêter l'animation. Par exemple, dans le code suivant, nous créons un bouton nommé "stop-btn" et y ajoutons un écouteur d'événement de clic :

$(document).ready(function() {
  $('#stop-btn').click(function() {
    $('#box').stop();
  });
});

Dans le code ci-dessus, nous utilisons la méthode jquery "ready()" pour s'assurer que la page est chargée, puis ajoute un écouteur d'événement de clic à l'élément bouton. Lorsque l'utilisateur clique sur le bouton, jquery arrête l'animation en cours sur l'élément nommé "box". Il est à noter que si nous voulons rejouer l'animation, nous devons utiliser la méthode "animate()" de jquery pour redémarrer l'animation.

3. Choses à noter lors de l'utilisation de jquery pour arrêter l'animation CSS

Lorsque vous utilisez jquery pour arrêter l'animation CSS, vous devez faire attention aux points suivants :

1. Nous pouvons utiliser jquery pour arrêter la lecture d'une animation CSS à tout moment, que ce soit pendant l'animation ou après sa fin.

2. Nous pouvons utiliser la méthode "stop()" pour arrêter toutes les animations sur l'élément spécifié, ou nous pouvons utiliser la méthode "stop(true)" pour arrêter l'animation en cours de lecture et y aller immédiatement. à l'état final. Ou utilisez la méthode "stop(false)" pour arrêter l'animation en cours de lecture et la laisser dans son état actuel.

3. Lorsque nous arrêtons l'animation CSS, toutes les propriétés d'animation CSS et les images clés définies seront immédiatement supprimées. Cela signifie que si nous voulons rejouer l'animation, nous devons rajouter les propriétés CSS et les images clés.

4. Résumé

Utiliser jquery pour arrêter l'animation CSS est un moyen très pratique d'arrêter facilement l'animation en cours de lecture et de la redémarrer en cas de besoin. Cependant, en utilisation réelle, vous devez faire attention à divers détails. Par exemple, lors de la définition d'animations, vous devez clarifier les détails de la lecture et de l'arrêt, et vous devez également connaître les différents statuts et attributs de la lecture de l'animation. Cet article présente principalement comment utiliser jquery pour arrêter la lecture de l'animation CSS. J'espère que cela sera utile à tout le monde.

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!