animate.css引⼊实现动画效果
最近在⽹上看到很多代码都通过引⼊animate.css来实现动画效果，后来我便使⽤这种⽅法来尝试着写了个⼩案例，结果真的很好⽤，⽐我们通常情况下使⽤css或js实现动画效果好得多，便在此做个总结。
第⼀步，便是下载相关的animate.css⽂件，⽅法有三种：
1.从官⽹下载：
2.通过npm下载：
$ npm install animate.css
3.使⽤在线cdn：
unpkg/animate.css@3.5.2/animate.min.css
第⼆步，便是写上页⾯结构，引⼊animate.css⽂件：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" type="" href="./animate.css">
8 <title>Document</title>
9 <style>
10 #dowebok {
11 height: 100px;
12 width: 100px;
13 background-color: pink;
14 }
15 </style>
16</head>
17<body>
18 <!-- <div class="animated bounce" id="dowebok"></div> -->
19 <!-- <div class="animated flash" id="dowebok"></div> -->
20 <!-- <div class="animated pulse" id="dowebok"></div> -->
21 <!-- <div class="animated rubberBand" id="dowebok"></div> -->
22 <!-- <div class="animated shake" id="dowebok"></div> -->
23 <!-- <div class="animated headShake" id="dowebok"></div> -->
24 <!-- <div class="animated swing" id="dowebok"></div> -->
25 <!-- <div class="animated tada" id="dowebok"></div> -->
26 <!-- <div class="animated wobble" id="dowebok"></div> -->
27 <!-- <div class="animated jello" id="dowebok"></div> -->
28 <!-- <div class="animated slideInDown" id="dowebok"></div> -->
29 <div class="animated rotateIn" id="dowebok"></div>
30</body>
31</html>
如上代码所⽰，这⾥边通过添加不同的类，便可以实现不同的动画效果，下⾯边介绍⼀下相关的类：
主要的动画⼤类有Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类。
（1）Attention(晃动效果)】
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
（2）【bounce(弹性缓冲效果)】
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
（3）【fade(透明度变化效果)】
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
（4）【flip(翻转效果)】
flip
flipInX
flipInY
flipOutX
flipOutY
（5）【rotate(旋转效果)】
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
（6）【slide(滑动效果)】
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
（7）【zoom(变焦效果)】
zoomIn
zoomInDown
html动画效果zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
（8）【special(特殊效果)】
hinge
rollIn
rollOut
lightSpeedIn
lightSpeedOut
实际应⽤
通过给JS添加或删除class，可以实现动态效果。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Document</title>
6<link rel="stylesheet" href="unpkg/animate.css@3.5.2/animate.min.css"> 7<style>
8.box{height: 100px;width: 100px;background-color: lightblue}
9</style>
10</head>
11<body>
12<button id="btn1">添加</button>
13<button id="btn2">移除</button>
14<div id="box" class="box"></div>
15<script>
16var oBtn1 = ElementById('btn1');
17var oBtn2 = ElementById('btn2');
18var oBox = ElementById('box');
lick = function(){
20 oBox.classList.add('animated');
21 oBox.classList.add('flash');
22 }
lick = function(){
24 ve('flash');
25 }
26</script>
27</body>
28</html>
⾄于动画的配置参数，⽐如动画持续时间，动画的执⾏次数等等，可以在元素上⾃⾏定义，覆盖掉animate.css⾥⾯所定义的就⾏了。 1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Document</title>
6<link rel="stylesheet" href="unpkg/animate.css@3.5.2/animate.min.css">
7<style>
8.box{height: 100px;width: 100px;background-color: lightblue}
9.infinite{animation-iteration-count:infinite;}
10</style>
11</head>
12<body>
13<button id="btn1">添加循环的动画效果</button>
14<button id="btn2">移除</button>
15<div id="box" class="box"></div>
16<script>
17var oBtn1 = ElementById('btn1');
18var oBtn2 = ElementById('btn2');
19var oBox = ElementById('box');
lick = function(){
21 oBox.classList.add('animated');
22 oBox.classList.add('flash');
23 oBox.classList.add('infinite');
24 }
lick = function(){
26 ve('flash');
27 }
28</script>
29</body>
30</html>
这也仅仅是通过学习来的东西，便现学现卖了~
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论