CSS动画库 Animate.css的使用

最近在看vue的时候了解到的一个css动画库，使用起来简单便捷，动画种类也比较丰富，在这里分享一下

官网地址：Animate.css

静态使用：

animated：使用animate.css的必要类名；

jackInTheBox：这里填写使用动画的名称；

delay-3s：这里可以写动画的延时执行时间

---

Animate

---

动态使用(jquery)：

jquery.one() -----用来执行事件最多一次；

$.fn.extend({animateCss: function(){}}) ----添加animateCss方法到jQuery原型($.fn)；

animateCss方法扩展jQuery并添加一个为您完成所有操作的功能

---

html：

Animate

click

js：

$.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;

  },

});

$("#btn").click(function () {

    $('#demo').animateCss('jackInTheBox',function () {

    //做一些想做的事

    });

})

---