首页 > > Animate.css CSS3动画库,使用优化版
2016
02-03

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

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');
    });
};
animate实例.zip大小:40KB | 来源:百度网盘
已经过安全软件检测无毒,请您放心下载。


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



最后编辑:
作者:Tony
这个人很懒什么也没留!~

发布评论

表情