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 发表
