Vue基础进阶之过渡效果

进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果；

如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式；

过渡的类名：过渡效果的样式是类样式，在进入/离开的过渡中有6个类样式的切换，分别是：

v-enter：定义进入过渡的开始状态；

v-enter-active：定义进入过渡生效状态，在这里可以定义进入过渡的时间、延迟、曲线函数等；

v-enter-to：定义进入过渡结束状态；

v-leave：定义离开过渡的开始状态；

v-leave-active：定义离开过渡生效状态，在这里可以定义离开过渡的时间、延迟、曲线函数等；

v-leave-to：定义离开过渡结束状态；

注意：在<transition name='fade'>中如果指定了name属性，过渡类名的v-要替换成name属性值；例如：fade-enter

示例：

初始加载页面：

由图像效果可知，点击显示与隐藏按钮，盒子的出现的效果并没有任何的过渡，显得比较死板：

初始代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>12_过渡效果</title>
 6         <script type="text/javascript" src="../js/vue.js" ></script>
 7         <style>
 8
 9         .mybtn{
10             margin: 0 auto;
11             width: 100px;
12             height: 100px;
13             background-color: red;
14         }
15
16         </style>
17
18     </head>
19     <body>
20         <div>
21
22
23             <button @click="flag=!flag">显示/隐藏</button>
24             <div v-show="flag" class="mybtn"></div>
25
26
27
28     </div>
29     </body>
30
31     <script>
32
33
34
35
36
37         let vm=    new Vue({
38                 data:{
39
40                     flag:false
41
42                 }
43
44             }).$mount('div');
45
46
47
48
49         </script>
50 </html>

初始效果代码

实现一种渐隐渐现的效果：

重点使用了transition的组件，以及修改了，离开时的样式和出现的样式：

<div><button @click="flag=!flag">显示/隐藏</button><transition name='fade'><div v-show="flag" class="mybtn"></div></transition></div>

样式：

<style>.mybtn{margin: 0 auto;width: 100px;height: 100px;background-color: red;}    .fade-enter-active,.fade-leave-active{transition: all 2s; }.fade-enter{opacity: 0;}.fade-enter-to{opacity: 1;}.fade-leave{opacity: 1;}.fade-leave-to{opacity: 0;}</style>

实现进入、离开过渡效果：

样式：

<style>.mybtn{width: 100px;height: 100px;background-color: red;transform: translateX(50px);}    .fade-enter-active,.fade-leave-active{transition: all 2s; }.fade-enter{opacity: 0;transform: translateX(0px);}.fade-enter-to{opacity: 1;transform: translateX(50px);}.fade-leave{opacity: 1;transform: translateX(50px);}.fade-leave-to{opacity: 0;transform: translateX(0px);}</style>

实现进入、离开过渡效果总的代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>12_过渡效果</title>
 6         <script type="text/javascript" src="../js/vue.js" ></script>
 7         <style>
 8
 9         .mybtn{
10
11             width: 100px;
12             height: 100px;
13             background-color: red;
14             transform: translateX(50px);
15         }
16     .fade-enter-active,.fade-leave-active{
17             transition: all 2s;
18
19         }
20         .fade-enter{
21             opacity: 0;
22                 transform: translateX(0px);
23         }
24         .fade-enter-to{
25             opacity: 1;
26             transform: translateX(50px);
27         }
28         .fade-leave{
29             opacity: 1;
30             transform: translateX(50px);
31         }
32         .fade-leave-to{
33             opacity: 0;
34             transform: translateX(0px);
35         }
36
37         </style>
38
39     </head>
40     <body>
41         <div>
42
43
44             <button @click="flag=!flag">显示/隐藏</button>
45             <transition name='fade'>
46             <div v-show="flag" class="mybtn"></div>
47
48             </transition>
49
50     </div>
51     </body>
52
53     <script>
54
55
56
57
58
59         let vm=    new Vue({
60                 data:{
61
62                     flag:false
63
64                 }
65
66             }).$mount('div');
67
68
69
70
71         </script>
72 </html>

实现进入与离开的过渡效果

过渡效果使用钩子函数

过渡效果中也提供了对应的钩子函数，这些钩子函数需要在<transition>组件上绑定，然后再实现；

过渡效果的钩子函数有：

@before-enter=“beforeEnter“ ：进入过渡运行前

@enter=“enter“ ：进入过渡运行时

@after-enter=“afterEnter“ ：进入过渡运行后

@enter-cancelled=“enterCancelled“ ：进入过渡被打断时

@before-leave=“beforeLeave“ ：离开过渡运行前

@leave=“leave“ ：离开过渡运行时

@after-leave=“afterLeave“ ：离开过渡运行后

@leave-cancelled=“leaveCancelled“ ：离开过渡被打断时

详情介绍网址：

https://cn.vuejs.org/v2/guide/transitions.html

实例：

vue代码：

<script>let vm=    new Vue({data:{flag:false},methods:{beforeEnter(){alert("beforeEnter 进入过渡开始前 " );},enter(){alert("enter 进入过渡状态开始");},afterEnter(){alert("afterEnter 进入过渡状态结束");},enterCancelled(){alert("enterCancelled 进入过渡状态 被打断");},beforeLeave(){alert("beforeLeave 离开过渡开始前 " );},leave(){alert("leave 离开过渡状态开始");},afterLeave(){alert("afterLeave 离开过渡状态结束");},leaveCancelled(){alert("leaveCancelled 离开过渡状态 被打断");}}//                 @before-enter="beforeEnter"
//           @enter="enter"
//            @after-enter="afterEnter"
//           @enter-cancelled="enterCancelled"
//
//          @before-leave="beforeLeave"
//          @leave="leave"
//          @after-leave="afterLeave"
//          @leave-cancelled="leaveCancelled"
//
                }).$mount('div');</script>

HTML代码：

<div><button @click="flag=!flag">显示/隐藏</button><transition name='fade'@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@enter-cancelled="enterCancelled"@before-leave="beforeLeave"@leave="leave"@after-leave="afterLeave"@leave-cancelled="leaveCancelled"><div v-show="flag" class="mybtn"></div></transition></div>

使用的样式与进入离开过渡效果一样

实现进入的时候变为green,离开的时候变为红色

修改了vue代码，其余的未修改：

methods:{beforeEnter(){
//                        alert("beforeEnter 进入过渡开始前 " );
                    },enter(el){//                        alert("enter 进入过渡状态开始");
//                        延时函数setTimeout( ()=>{el.style.backgroundColor='green';},400);},afterEnter(){
//                        alert("afterEnter 进入过渡状态结束");
                    },enterCancelled(){//                        alert("enterCancelled 进入过渡状态 被打断");
                    },beforeLeave(){
//                        alert("beforeLeave 离开过渡开始前 " );
                    },leave(el){el.style.backgroundColor='red';//                        alert("leave 离开过渡状态开始");
                    },afterLeave(){
//                        alert("afterLeave 离开过渡状态结束");
                    },leaveCancelled(){//                        alert("leaveCancelled 离开过渡状态 被打断");
                    }}

过渡效果的使用钩子函数总的代码：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>13_过渡效果的钩子函数</title>
  6         <script type="text/javascript" src="../js/vue.js" ></script>
  7         <style>
  8
  9         .mybtn{
 10
 11             width: 100px;
 12             height: 100px;
 13             background-color: red;
 14             transform: translateX(50px);
 15         }
 16     .fade-enter-active,.fade-leave-active{
 17             transition: all 2s;
 18
 19         }
 20         .fade-enter{
 21             opacity: 0;
 22                 transform: translateX(0px);
 23         }
 24         .fade-enter-to{
 25             opacity: 1;
 26             transform: translateX(50px);
 27         }
 28         .fade-leave{
 29             opacity: 1;
 30             transform: translateX(50px);
 31         }
 32         .fade-leave-to{
 33             opacity: 0;
 34             transform: translateX(0px);
 35         }
 36
 37         </style>
 38
 39     </head>
 40     <body>
 41         <div>
 42
 43
 44             <button @click="flag=!flag">显示/隐藏</button>
 45             <transition name='fade'
 46            @before-enter="beforeEnter"
 47            @enter="enter"
 48             @after-enter="afterEnter"
 49            @enter-cancelled="enterCancelled"
 50
 51           @before-leave="beforeLeave"
 52           @leave="leave"
 53           @after-leave="afterLeave"
 54           @leave-cancelled="leaveCancelled">
 55
 56
 57             <div v-show="flag" class="mybtn"></div>
 58
 59             </transition>
 60
 61     </div>
 62     </body>
 63
 64     <script>
 65
 66
 67
 68
 69
 70         let vm=    new Vue({
 71                 data:{
 72
 73                     flag:false
 74
 75                 },
 76                 methods:{
 77
 78                     beforeEnter(){
 79 //                        alert("beforeEnter 进入过渡开始前 " );
 80                     },
 81                     enter(el){
 82
 83 //                        alert("enter 进入过渡状态开始");
 84 //                        延时函数
 85                    setTimeout( ()=>{
 86                        el.style.backgroundColor='green';
 87
 88
 89                    },400);
 90                     },
 91
 92                     afterEnter(){
 93 //                        alert("afterEnter 进入过渡状态结束");
 94                     },
 95                     enterCancelled(){
 96
 97 //                        alert("enterCancelled 进入过渡状态 被打断");
 98                     },
 99
100
101
102
103                     beforeLeave(){
104 //                        alert("beforeLeave 离开过渡开始前 " );
105                     },
106                     leave(el){
107                         el.style.backgroundColor='red';
108
109 //                        alert("leave 离开过渡状态开始");
110                     },
111
112                     afterLeave(){
113 //                        alert("afterLeave 离开过渡状态结束");
114                     },
115                     leaveCancelled(){
116
117 //                        alert("leaveCancelled 离开过渡状态 被打断");
118                     }
119                 }
120
121
122 //                 @before-enter="beforeEnter"
123 //           @enter="enter"
124 //            @after-enter="afterEnter"
125 //           @enter-cancelled="enterCancelled"
126 //
127 //          @before-leave="beforeLeave"
128 //          @leave="leave"
129 //          @after-leave="afterLeave"
130 //          @leave-cancelled="leaveCancelled"
131 //
132
133
134             }).$mount('div');
135
136
137
138
139         </script>
140 </html>

过渡效果的使用钩子函数

过渡效果结合Animate的使用

Vue中的过渡效果也可以与其他第三方CSS动画库一起使用，例如Animate.css；

使用第三方动画库我们需要用到自定义过渡类名：

enter-class； enter-active-class； enter-to-class； leave-class； leave-active-class； leave-to-class；

用到的代码：

<link rel="stylesheet" href="../css/animate.css" />

<transition name='fade'enter-to-class='animated zoomlnDown'leave-to-class='animated zoomOutUp'><div v-show="flag" class="mybtn"></div></transition>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>14_过渡效果结合Animate的使用</title>
 6         <script type="text/javascript" src="../js/vue.js" ></script>
 7         <link rel="stylesheet" href="../css/animate.css" />
 8         <style>
 9
10         .mybtn{
11
12             width: 100px;
13             height: 100px;
14             background-color: red;
15             transform: translateX(50px);
16         }
17     .fade-enter-active,.fade-leave-active{
18             transition: all 2s;
19
20         }
21         .fade-enter{
22             opacity: 0;
23                 transform: translateX(0px);
24         }
25         .fade-enter-to{
26             opacity: 1;
27             transform: translateX(50px);
28         }
29         .fade-leave{
30             opacity: 1;
31             transform: translateX(50px);
32         }
33         .fade-leave-to{
34             opacity: 0;
35             transform: translateX(0px);
36         }
37
38         </style>
39
40     </head>
41     <body>
42         <div>
43
44
45             <button @click="flag=!flag">显示/隐藏</button>
46             <transition name='fade'
47                 enter-to-class='animated zoomlnDown'
48
49                leave-to-class='animated zoomOutUp'
50
51                 >
52             <div v-show="flag" class="mybtn"></div>
53
54             </transition>
55
56     </div>
57     </body>
58
59     <script>
60
61
62
63
64
65         let vm=    new Vue({
66                 data:{
67
68                     flag:false
69
70                 }
71
72             }).$mount('div');
73
74
75
76
77         </script>
78 </html>

过渡效果结合Animate的使用

转载于:https://www.cnblogs.com/jiguiyan/p/10740444.html