Using jQuery to encapsulate animate.css (detailed tutorial)

Below I will share with you an example of jQuery encapsulating animate.css, which has a good reference value and I hope it will be helpful to everyone.

animate.css is an interesting, cross-browser CSS3 animation library.

1. First introduce the animate css file

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

2. Add the specified animation style to the specified element Name

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

This includes two class names. The first one is the basic style name that must be added. Any element you want to implement must add this. The second is the specified animation style name.

3. If you want to dynamically add an animation style to an element, you can do it through jquery

Add a class to the animation object, and then Listen to the animation end event. Once the animation ends, immediately remove the previously added class.

The official package of jQuery is given:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of how to implement vuex (detailed tutorial)

How to implement WeChat sharing in the circle of friends and send friends in vue

How does vue.js build a large single-page application

How to use implicit calls in javascript?

Detailed explanation of using devtool in webpack

How to use refs in React components

Cross-domain issues with proxyTable in the vue-cli project

express builds query server

Use js custom trim function to delete spaces at both ends

JavaScript operating principle

The above is the detailed content of Using jQuery to encapsulate animate.css (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!