Animate.css动画库的使用

第一：下载地址 https://github.com/daneden/animate.css 

第二：animate.css是一个很灵活的基于css3动画跨浏览器的css动画库，在你的项目中可以起到意想不到的作用
安装方法：
bower安装：$ bower install animate.css --save

npm安装：$ npm install animate.css --save

基本使用方法：
1.引入css      注：这一步…有…问题吗？

2.可以使用cdn 

3.加密方式引入

4.使用：

     animated是声明使用该动画库；
     infinite是声明是否无限循环，如果不想无限循环的话不加这个类名就是了；
     bounce就是动画效果了。

5.以下是GitHub作者给出的动画名称表了，这里本人用百度做了相应的翻译，可能不太标准，具体请参照具体呈现 效果的动画

               

6.你可以用animate.css结合jQuery做很多东西。动态地使用jQuery添加动画：

$('#yourElement').addClass('animated bounceOutLeft');   //简单的添加class
			
var animationEnd = (function(el) {
  var animations = {
    animation: 'animationend',
    OAnimation: 'oAnimationEnd',
    MozAnimation: 'mozAnimationEnd',
    WebkitAnimation: 'webkitAnimationEnd',
  };
for (var t in animations) {
    if (el.style[t] !== undefined) {
      return animations[t];
    }
  }
})(document.createElement('div'));
$('#yourElement').one(animationEnd, doSomething);

7.你可以使用jQuery扩展一个函数

$.fn.extend({
  animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
      var animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'mozAnimationEnd',
        WebkitAnimation: 'webkitAnimationEnd',
      };
			for (var t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement('div'));
			this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);
			if (typeof callback === 'function') callback();
    });
			return this;
  },
});
			
//下面是使用方法
$('#yourElement').animateCss('bounce');
//or
$('#yourElement').animateCss('bounce', function() {
  // Do somthing after animation
});
			
//你可以更改动画的持续时间，添加延迟或更改播放次数：
#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}
//注意：一定要将“浏览器内核”的CSS相关前缀（WebKit，MOZ，等）放上去

8.补充一下在vue-cli环境中的使用

      a.将对应的css文件复制到相关文件夹

      b.全局使用：在main.js中import之后use 即可全局使用

      c.局部页面使用则在style标签中@import即可

9.有什么疑问可以在留言区问我哦