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/
- 本文固定链接: http://www.archn.cn/?post=18
- 转载请注明: : Tony 2016年2月3日 于 TonyCodes 发表