Verwendung von jQuery zum Kapseln von animate.css (ausführliches Tutorial)

Im Folgenden werde ich Ihnen ein Beispiel für die Kapselung von animate.css durch jQuery vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

animate.css ist eine unterhaltsame, browserübergreifende CSS3-Animationsbibliothek.

1. Führen Sie zuerst die animierte CSS-Datei ein

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

2. Fügen Sie dem angegebenen Element den angegebenen Animationsstil hinzu Name

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

Dazu gehören zwei Klassennamen. Der erste ist der grundlegende Stilname, der für jedes Element hinzugefügt werden muss, das Sie implementieren möchten. Der zweite ist der angegebene Name des Animationsstils.

3. Wenn Sie einem Element dynamisch einen Animationsstil hinzufügen möchten, können Sie dies über jquery tun.

Eine Klasse hinzufügen Animationsobjekt und hören Sie sich dann das Animationsendereignis an. Sobald die Animation endet, entfernen Sie sofort die zuvor hinzugefügte Klasse.

Das offizielle Paket von jQuery lautet:

//扩展$对象，添加方法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');

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Ausführliche Erklärung zur Implementierung von Vuex (ausführliches Tutorial)

So implementieren Sie den WeChat-Sharing-Freundeskreis und Freunde in Vue senden

Wie erstelle ich eine große Single-Page-Anwendung mit vue.js

Wie verwende ich implizite Aufrufe in Javascript?

Detaillierte Erläuterung der Verwendung von Devtool im Webpack

So verwenden Sie Refs in React-Komponenten

Domänenübergreifende Probleme mit ProxyTable im Vue-Cli-Projekt

Express erstellt einen Abfrageserver

Verwenden Sie die benutzerdefinierte Trim-Funktion von js, um Leerzeichen zu entfernen beide Enden

Wie JavaScript funktioniert

Das obige ist der detaillierte Inhalt vonVerwendung von jQuery zum Kapseln von animate.css (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!