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
时间： 2024-11-09 06:03:49