zoukankan      html  css  js  c++  java
  • 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              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;
                 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{
            
                 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              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              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              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的使用
  • 相关阅读:
    vbox增加磁盘
    PMP第五版第一次考试相关提醒
    PMP学习系列7:PMBOK(5th)第五章:项目范围管理
    PMP学习系列6:PMBOK(5th)第四章-项目整合管理
    Readlist & AIM1
    如何高校管理你的时间
    PMP学习系列5:PMBOK(5th)第三章-项目管理过程
    PMP学习系列4:PMBOK(5th)第二章-组织影响和项目生命周期
    沃顿商学院最受欢迎的谈判课
    PMP学习系列3:PMBOK(5th)第一章-引言
  • 原文地址:https://www.cnblogs.com/jiguiyan/p/10740444.html
Copyright © 2011-2022 走看看