JAVA高级面试进阶训练营视频教程

admin

animate.css 是一款基本CSS3的动画样式插件，它定义了多种动画效果，见：http://www.jq22.com/yanshi819

给元素加入相应的样式类，即可赋于动画效果，非常easy！

 

1、 添加动画样式，实现动画效果：

1 <div class="demo animated bounce"></div>

说明:

a) 样式 animated 指定它是一个动画元素。

b) 样式 bounce 指明它的动画效果。

 

2、元素动画是可以监听的：

1 // 监听动画开始执行事件
2 $('#OBJ').bind('animationstart webkitAnimationStart mozAnimationStart MSAnimationStart oanimationstart', function(){
3   // ...
4 });
5 
6 // 监听动画执行结束事件
7 $('#OBJ').bind('animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend', function(){
8   // ...
9 });

 

3、采用js动态添加动画：

1 $('#OBJ').addClass('animated fadeInUp');

 

4、在和wow.js混用时，如果想采用js动态添加动画时，必须先清除属性style，不然无法实现动画效果：

 1 $('#OBJ').bind('animationend -ms-animationend -moz-animationend -webkit-animationend -o-animationend', function(){
 2         $(this).removeClass('animated');
 3         $(this).removeClass('bounce');
 4         $(this).removeClass('flash');
 5         $(this).removeClass('pulse');
 6         $(this).removeClass('rubberBand');
 7         $(this).removeClass('shake');
 8         $(this).removeClass('swing');
 9         $(this).removeClass('tada');
10         $(this).removeClass('wobble');
11         $(this).removeClass('bounceIn');
12         $(this).removeClass('bounceInDown');
13         $(this).removeClass('bounceInLeft');
14         $(this).removeClass('bounceInRight');
15         $(this).removeClass('bounceInUp');
16         $(this).removeClass('bounceOut');
17         $(this).removeClass('bounceOutDown');
18         $(this).removeClass('bounceOutLeft');
19         $(this).removeClass('bounceOutRight');
20         $(this).removeClass('bounceOutUp');
21         $(this).removeClass('fadeIn');
22         $(this).removeClass('fadeInDown');
23         $(this).removeClass('fadeInDownBig');
24         $(this).removeClass('fadeInLeft');
25         $(this).removeClass('fadeInLeftBig');
26         $(this).removeClass('fadeInRight');
27         $(this).removeClass('fadeInRightBig');
28         $(this).removeClass('fadeInUp');
29         $(this).removeClass('fadeInUpBig');
30         $(this).removeClass('fadeOut');
31         $(this).removeClass('fadeOutDown');
32         $(this).removeClass('fadeOutDownBig');
33         $(this).removeClass('fadeOutLeft');
34         $(this).removeClass('fadeOutLeftBig');
35         $(this).removeClass('fadeOutRight');
36         $(this).removeClass('fadeOutRightBig');
37         $(this).removeClass('fadeOutUp');
38         $(this).removeClass('fadeOutUpBig');
39         $(this).removeClass('flip');
40         $(this).removeClass('flipInX');
41         $(this).removeClass('flipInY');
42         $(this).removeClass('flipOutX');
43         $(this).removeClass('flipOutY');
44         $(this).removeClass('lightSpeedIn');
45         $(this).removeClass('lightSpeedOut');
46         $(this).removeClass('rotateIn');
47         $(this).removeClass('rotateInDownLeft');
48         $(this).removeClass('rotateInDownRight');
49         $(this).removeClass('rotateInUpLeft');
50         $(this).removeClass('rotateInUpRight');
51         $(this).removeClass('rotateOut');
52         $(this).removeClass('rotateOutDownLeft');
53         $(this).removeClass('rotateOutDownRight');
54         $(this).removeClass('rotateOutUpLeft');
55         $(this).removeClass('rotateOutUpRight');
56         $(this).removeClass('slideInDown');
57         $(this).removeClass('slideInLeft');
58         $(this).removeClass('slideInRight');
59         $(this).removeClass('slideOutLeft');
60         $(this).removeClass('slideOutRight');
61         $(this).removeClass('slideOutUp');
62         $(this).removeClass('hinge');
63         $(this).removeClass('rollIn');
64         $(this).removeClass('rollOut');
65         $(this).removeAttr('style'); // 解决wow.js与animated.css的冲突。因为wow.js会在该元素上产生style设置。导致animated.css无效
66       });