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
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!