Comment puis-je empêcher les animations de survol CSS3 de s'arrêter prématurément à la sortie de la souris ?

Préservation des animations CSS3 déclenchées par :hover à la sortie de la souris

Lors de l'utilisation d'animations CSS3 sur l'état :hover d'un élément, il est courant de rencontrer le problème de fin soudaine de l'animation lorsque le curseur de la souris quitte l'élément. Ce comportement peut être indésirable si vous souhaitez que l'animation termine sa durée naturelle quelle que soit la présence de la souris.

Solution : intégration de JavaScript

Malheureusement, il n'existe pas de solution CSS standardisée pour cette exigence. Pour surmonter cette limitation, vous pouvez incorporer un peu de JavaScript comme suit :

1. Attribuer une classe d'animation : Ajoutez une classe d'animation à l'élément qui inclut l'animation souhaitée.
2. Gérer l'événement de fin d'animation : Attachez un écouteur d'événement à l'événement de fin d'animation, qui est pris en charge par divers navigateurs.
3. Supprimer la classe d'animation : Dans l'écouteur d'événement, supprimez la classe d'animation de l'élément, permettant à l'animation de terminer son exécution.
4. Déclencher l'animation en survol : Modifiez le gestionnaire de survol pour ajouter la classe d'animation à l'élément lorsqu'il est survolé terminé.

Exemple :

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated");
})

$(".box").hover(function(){
  $(this).addClass("animated");
})

Ce code attache un écouteur d'événement à l'événement de fin d'animation et supprime la classe "animée" de l'élément lors son achèvement. De plus, il ajoute la même classe d'animation lorsque l'élément est survolé.

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!