Vue基础进阶之过渡效果

时间：2019-04-20 13:16:42 阅读：97 评论：0 收藏：0 [点我收藏+]

进入/离开过渡效果：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的使用

Vue基础进阶之过渡效果

原文：https://www.cnblogs.com/jiguiyan/p/10740444.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

Vue基础进阶 之 过渡效果

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

过渡效果使用钩子函数

过渡效果结合Animate的使用

Vue基础进阶之过渡效果