Animate.css_动画学习之Animate.css的使用与解析

转自：http://blog.csdn.net/code_for_free/article/details/52075129

近况

近期生活比较单一。

const 提升自己 = true;while( 提升自己 ) {写码...看书...思考...睡觉}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

既单一也充实，单一使我平静，充实使我保持向上的感觉，希望自己真难做到“持续学习，保持思考，不断进步”。

最近看到腾讯ISUX团队的一篇博客《H5动效的常见制作手法》，里面简单介绍了现在H5开发中实现动画效果的几种方式（GIF，逐帧动画，css3，canvas，svg，video…），实际的内容不多，但对我多少有点启发意义，感兴趣的同学不妨看看。

作为一只前端小菜鸟，前端的各个细分领域都能吸引到我，于是看了上面的博客后，挑了最感兴趣的CSS3动画来学习。对于CSS3动画，我第一个想起的就是animate.css，于是便有了这篇博客。

快速上手animate.css

animate.css的主页简单明了，能演示各个动画的效果，目的也很简单，“just-add-water css animations”。那天好奇去搜索了一下作者Daniel Eden，真是酷到不行。

不多说，直接上学习资料：

官方github

估计读完github里面的README.md之后就不用往下看了吧，对于animate.css的用法早已了然于心，如果你还有兴趣，想看看我这个无聊的博主能写些什么东西，希望不会让你失望。

一，静态使用动画（很绕吧…）

1. 引用animate.css

2. 给需要动画的元素添加class

   
<div class="animated bounce infinite">动画div>

   • 1
   • 2

3. 刷新页面就能看到动画这两个字在上下蹦。done，静态使用就这么简单

总结一下场景和优缺点吧，优点是简单呀，添加个类名就一劳永逸了，一行js代码都不用写，缺点是不能人为控制开始和停止。我能想到的场景：

①loading动画

②新开页面某些元素动一次，能吸引用户注意（如注册按钮等）

二，动态使用

掌握了上述用法之后，动态使用也不过小菜一碟。基本思路如下：

给动画对象添加类，然后监听动画结束事件，一旦监听到动画结束，立即移除前面添加的类。

这样一来，想什么时候开始和结束动画都随你了。对于这种用法（也是实际开发中最多的用法），官方给出了jQuery的封装：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

因为手上有个小项目没用jQuery这么高大上的库，于是自己写了个js原生的实现，也扩展了一些功能：

//animate("选择器","动画","次数","时延")function animate(seletor, animation_name, count, delay) {var target = document.querySelectorAll(seletor)var timer = null;timer = setInterval( function() {target.forEach( function(x) {x.className += " animated " + animation_name;x.addEventListener("animationend", function(){x.className = x.className.replace(" animated " + animation_name, "");});} )count --;if( count <= 0 ) {clearInterval( timer );}}, delay)}//使用示例animate(&＃39;.haha&＃39;, "bounce", 2, 1000);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

上面的代码也就是个半成品：

1. 只监听了”animationend”事件，兼容性不好（可多次调用addEventListener监听其他事件）；
2. 先延时，再执行（将回调函数封装一下，先调用回调函数一次，再进入间隔循环）

源码解析