31.动画-使用现成的动画类库Animate
animate官方网址：
http://www.animate.net.cn/
下载地址：
https://github.com/animate-css/animate.css/releases
Animate.css
效果展示：
https://www.kettle.net.cn/animate/index.html
使用方法：
第一步. 引入animate.css文件
也可以使用http://www.bootcdn.cn/animate.css/的服务
<head> <link rel="stylesheet" href="animate.min.css"> </head>
第二步. 给指定的元素加上指定的动画样式名
第一个animated是必须添加的样式名，第二个是指定的动画样式名。
<div class="animated fadeInUp"></div>
其他的补充说明
采用jquery可以不修改现有代码，动态添加动画
1.如果说想给某个元素动态添加动画样式，可以通过jquery来实现：
$('#yourElement').addClass('animated bounceOutLeft');
2.当动画效果执行完成后还可以通过以下代码添加事件
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
3.你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：
$(function(){ $('#yourElement').addClass('animated bounce'); });
4.有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
$(function(){ $('#yourElement').addClass('animated bounce'); setTimeout(function(){ $('#yourElement').removeClass('bounce'); }, 1000); });
5.animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：
#yourElement{ animate-duration: 2s; //动画持续时间 animate-delay: 1s; //动画延迟时间 animate-iteration-count: 2; //动画执行次数 }
案例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=adge"> <title>Document</title> <script src="vue.js"></script> <link rel="stylesheet" href="animate.css"> </head> <body> <div id="app"> <!--class的第一个animated是必须添加的样式名，第二个是指定的动画样式名。--> <p class="animated fadeInUp">我不在transition包裹中使用animate</p> <input type="button" value="动画切换" @click="flag=!flag"> <transition enter-active-class="bounceIn" leave-active-class="bounceOut"> <p v-show="flag" class="animated">我是一个动画效果</p> </transition> <!-- 1.把要实现动画的元素，使用transition元素包裹起来 --> <!-- 2.要实现动画的元素，必须使用v-if或v-show来进行控制 --> <!-- 3.使用现成动画类库，需要引入animated.css --> <!-- 4.使用现成动画类库，transition元素上面写进入跟离开效果 --> <!-- 5.使用现成动画类库，效果样式名称可在animated官方查找 --> <!-- 6.使用现成动画类库，要动画的元素要加class="animated" --> </div> </body> <script> //创建Vue实例，得到ViewModel var vm=new Vue({ el:"#app", data:{ flag:false }, methods:{} }); </script> </html>
