vue动画的用法

vue动画

　　　　在vue.js中有两种写动画的方法，第一种就是像js里一样，用原生代码来实现，第二种则是使用animate.css的动画类文件，这个动画类和bootstrap.css文件类似，直接调用类就可以了，话不多说，直接上代码。

一、vue.js原生动画

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <script type="text/javascript" src="js/vue.js" ></script>
 7         <style>
 8             .oDiv{
 9                 width: 200px;
10                 height: 200px;
11                 border: 3px dashed red;
12                 background: coral;
13             }
14             .fade-transition{
15                 transition: 2s all ease;
16             }
17             .fade-enter{
18                 opacity: 0;
19             }
20             .fade-leave{
21                 opacity: 0;
22                 transform: translate(200px);
23             }
24         </style>
25     </head>
26     <body>
27         <div id="box">
28             <input type="button" value="button" @click="toggle()" />
29             <div class="oDiv" v-show="Dist" transition="fade">{{Dist}}</div>
30         </div>
31     </body>
32     <script type="text/javascript">
33             new Vue({
34                 el:'#box',
35                 data:{
36                     Dist:false
37                 },
38                 methods:{
39                     toggle:function(){
40                         this.Dist=!this.Dist;
41                     }
42                 }
43             })
44         </script>
45 </html>

二、animate.css动画类

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="css/animate.css"/>
 7         <script type="text/javascript" src="js/vue.js" ></script>
 8         <style>
 9             #box{
10                 width: 500px;
11                 margin: 0 auto;
12             }
13             #oDiv{
14                 width: 200px;
15                 height: 200px;
16                 border: 3px dashed red;
17                 background: coral;
18             }
19             
20         </style>
21     </head>
22     <body>
23         <div id="box">
24             <input type="button" value="button" @click="toggle()" />
25             <!--class="animated"让运动物体准备运动，引用的animate里面的clss类， bouce是动画名称-->
26             <div id="oDiv" v-show="Dist" class="animated" transition="bouce">{{Dist}}</div>
27         </div>
28     </body>
29     <script type="text/javascript">
30             new Vue({
31                 el:'#box',
32                 data:{
33                     Dist:false
34                 },
35                 methods:{
36                     toggle:function(){
37                         this.Dist =!this.Dist;
38                     }
39                 },
40                 transitions:{//可以接一个专门运作动画的参数数组
41                     bouce:{//动画名称
42                         enterClass:'zoomInLeft',           
43                         leaveClass:'zoomOutRight'
44                     }
45                 }
46             })
47         </script>
48 </html>

　　具体的动画类，可以去看一下API。

animate.css官网地址：https://daneden.github.io/animate.css

animate.css Github下载地址：https://github.com/daneden/animate.css