Utiliser jQuery pour encapsuler animate.css (tutoriel détaillé)

Ci-dessous, je vais partager avec vous un exemple d'encapsulation jQuery d'animate.css. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

animate.css est une bibliothèque d'animation CSS3 amusante et multi-navigateurs.

1. Introduisez d'abord le fichier CSS animé

<link rel="stylesheet" href="animate.css" rel="external nofollow" >

2. Ajoutez l'élément spécifié à l'élément spécifié. element Nom du style d'animation

<p id="box" class="animated bounce"></p>

Cela comprend deux noms de classe. Le premier est le nom du style de base qui doit être ajouté. Tout élément que vous souhaitez implémenter doit l'ajouter. Le second est le nom du style d'animation spécifié.

3. Si vous souhaitez ajouter dynamiquement un style d'animation à un élément, vous pouvez le faire via jquery

Ajouter une classe au objet d'animation, puis écoutez l'événement de fin d'animation. Une fois l'animation terminée, supprimez immédiatement la classe précédemment ajoutée.

Le package officiel de jQuery est donné :

//扩展$对象，添加方法animateCss
 $.fn.extend({
 animateCss: function (animationName) {
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  $(this).addClass('animated ' + animationName).one(animationEnd, function() {
  $(this).removeClass('animated ' + animationName);
  });
 }
});
//调用示例：
$('#box').animateCss('bounce');

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Explication détaillée de la façon de mettre en œuvre vuex (tutoriel détaillé)

Comment mettre en œuvre le cercle d'amis de partage WeChat et envoyer des amis dans vue

Comment créer une grande application d'une seule page avec vue.js

Comment utiliser les appels implicites en javascript ?

Explication détaillée de l'utilisation de devtool dans webpack

Comment utiliser les références dans les composants React

Problèmes inter-domaines avec proxyTable dans le projet vue-cli

Express crée un serveur de requêtes

Utilisez la fonction de découpage personnalisée js pour supprimer les espaces à les deux extrémités

Comment fonctionne JavaScript

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!