vue2.0动画

Posted Booo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.0动画相关的知识,希望对你有一定的参考价值。

 相对于vue1.0来说,vue2.0的动画变化还是挺大的,

    在1.0中,直接在元素中加 transition ,后面跟上名字。

 而在vue2.0中,需要把设置动画的元素、路由放在<transition name="fade"></transition>中,name就是动画名称。

 

  在1.0时,css需要设置(动画名称以fade为例).fade-transition .fade-enter .fade-leave 

  在2.0时,css设置大改,.fade-enter{} 元素初始状态 .fade-enter-active{}  元素最终状态  .fade-leave-active{} 元素离开的最终状态

  在2.0中,依然可以与animate.css结合起来一起写动画,具体用法请看第三块代码

  在2.0中,关于动画还为我们提供了一些事件,在下面第四段代码块

 

vue1.0动画源码:

 

技术分享图片
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>博客园</title>
 6         <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/1.0.28/vue.min.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>
技术分享图片

 

vue2.0动画源码:

  

技术分享图片
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>博客园</title>
 6         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" ></script>
 7         <style>
 8             p{
 9                 width: 300px;
10                 height: 300px;
11                 background-color: yellow;
12             } 
13             .donghua-enter-active,.donghua-leave-active{
14                 transition: 5s all ease;
15             }
16             .donghua-enter-active{
17                 opacity: 1;
18                 width: 300px;
19                 height: 300px;
20             }
21             .donghua-leave-active{
22                 opacity: 0;
23                 width: 100px;
24                 height: 100px;
25             }
26             .donghua-enter,.donghua-leave{
27                 opacity: 0;
28                 width: 50px;
29                 height: 50px;
30             }
31         </style>
32     <script src="vue.js"></script>
33     <script>
34         window.onload=function(){
35             new Vue({
36                 el:‘#box‘,
37                 data:{
38                     show:false
39                 }
40             });
41         };
42     </script>
43 </head>
44 <body>
45     <div id="box">
46         <input type="button" value="点击显示隐藏" @click="show=!show">
47         <transition name="donghua">
48             <p v-show="show"></p>
49         </transition>
50     </div>
51 </body>
52 </html>
技术分享图片

 

vue2.0配合 animate.css

技术分享图片
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>配合animate.css做动画</title>
 6         <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css"/>
 7         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" ></script>
 8         <style>
 9             p{
10                 width: 300px;
11                 height: 300px;
12                 background-color: yellow;
13                 margin: 0 auto;
14             } 
15     </style>
16         <script type="text/javascript">
17             window.onload=function(){
18                 new Vue({
19                     el:‘#box‘,
20                     data:{
21                         show:false
22                     }
23                 })
24             }
25         </script>
26     </head>
27     <body>
28         <div id="box">
29             <input type="button" value="点击显示和隐藏" @click="show=!show" />
30             <transition enter-active-class="zoomOutDown" leave-active-class="zoomOutUp">
31                 <p v-show="show" class="animated"></p>
32             </transition>
33         </div>
34     </body>
35 </html>
技术分享图片

vue2.0中,内置的动画事件

技术分享图片
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>动画事件</title>
 6         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" ></script>
 7         <style>
 8             p{
 9                 width: 300px;
10                 height: 300px;
11                 background-color: yellow;
12             } 
13             .donghua-enter-active,.donghua-leave-active{
14                 transition: 5s all ease;
15             }
16             .donghua-enter-active{
17                 opacity: 1;
18                 width: 300px;
19                 height: 300px;
20             }
21             .donghua-leave-active{
22                 opacity: 0;
23                 widows: 100px;
24                 height: 100px;
25             }
26             .donghua-enter,.donghua-leave{
27                 opacity: 0;
28                 width: 100px;
29                 height: 100px;
30             }
31     </style>
32     <script>
33         window.onload=function(){
34             new Vue({
35                 el:‘#box‘,
36                 data:{
37                     show:false
38                 },
39                 methods:{
40                     beforeEnter(){
41                         console.log("<!-- 进入动画开始之前 -->");
42                     },
43                     Enter(){
44                         console.log("<!-- 正在进入动画-->");
45                     },
46                     afterEnter(el){
47                         console.log("<!-- 动画结束 -->");
48                     },
49                     beforeLeave(el){
50                         console.log("<!-- 离开动画开始之前 -->");
51                         el.style.background=‘blue‘;    //改变颜色
52                         el.innerHTML="123";
53                     },
54                     Leave(){
55                         console.log("<!-- 正在离开动画-->");
56                     },
57                     afterLeave(){
58                         console.log("<!-- 离开动画结束 -->");
59                     },
60                 }
61             });
62         };
63     </script>
64 </head>
65 <body>
66     <div id="box">
67         <input type="button" value="点击显示隐藏" @click="show=!show">
68         <transition name="donghua"
69             @before-enter="beforeEnter"
70             @enter="Enter"
71             @after-enter="afterEnter"
72             @before-leave="beforeLeave"
73             @leave="Leave"
74             @after-leave="afterLeave"
75         >
76             <p v-show="show"></p>
77         </transition>
78     </div>
79 </body>
80 </html>
81 
82 </html>
技术分享图片

 

 

 
 

以上是关于vue2.0动画的主要内容,如果未能解决你的问题,请参考以下文章

transition vue2.0动画

Vue2.0的变化———vue2.0动画的变化vue-2.0路由的变化

Vue2.0—过渡与动画(二十一)

vue2.0的变化

vue2.0学习之动画

Vue2.0学习—过渡与动画(六十三)