Animate.css CSS3动画库,使用优化版

Tony哥
2016-02-03 / 0 评论 / 143 阅读 / 正在检测是否收录...

Animate.css
 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。开发者封装了一些常用的特效效果作为className方便码农使用,以下我简单描述下它怎么玩及分享一个js动态加载的一个优化方法。

demo演示: demo/Animate.css/

使用实例可以参考如下:

  1. 下载 animate.css 或者您下载我打包好的实例,在本文末尾下载
  2. 加载样式表到您的HTML
  3. 引用动画样式如:
/*动画引用,其中bounceInUp为引用的库样式*/
 div{
    animation: bounceInUp 5s;
    -moz-animation: bounceInUp 5s;    /* Firefox */
    -webkit-animation: bounceInUp 5s;    /* Safari 和 Chrome */
    -o-animation: bounceInUp 5s;    /* Opera */
 }

JS动态加载方法:以下是经过我改造过的动态加载方法: 首先您需要引用jQuery框架

/**
 * //---动画动态加载方法-----不影响原有样式--
 * @param __d //--传入对象
 * @param __x //--动画方法
 * //--本方法要与animate.css相配合有效--
 * //例子: doAnim(".PB",'shake'); //--让PB左右晃动
 */
var doAnim=function(__d,__x) {
    if(!(__d instanceof jQuery)) __d=$(__d);
    if(__d.data('__cls')) __d.removeClass(__d.data('__cls')).removeClass('animated');
    __d.addClass(__x + ' animated').data('__cls',__x).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass($(this).data('__cls')).removeClass('animated').removeData('__cls');
    });
};

或者参考官方开发团队链接 http://daneden.github.io/animate.css/

0

评论 (0)

取消