vue封装的transition标签

• vue提供了一个过渡动画的标签 transition
• 替代css中再用transition的属性

注意事项⚠️

1. transition 标签只能包含 1 个元素；如果里面写了多个元素，则只生效第一个
2. transition 包裹的标签需要设置 v-show / v-if 属性控制元素的显示

<button @click='isShow=!isShow'>显示隐藏</button>
<transition name='hello' appear>
    <h1 v-show='isShow'>你好呀</h1>
</transition>
 
 ......
 
 data(){
     return{
         isShow:true
     }
 }

......

<style scope>
    h1{
    backgroundcolor:yello;
    }
    
    .hello-enter-active{
        animation:aniName 1s linear;
    }
    .hello-leave-active{
        animation:aniName 1s linear reverse;
    }
    @keyframe aniName{
        form{
            transform:tanslateX(-100%);
        }
        to{
            transform:tanslateX(0);
        }
    }
</style>

动画类

进入：.v-enter 始状态、.v-enter-to 末状态、.v-enter-active 进入动画

离开：.v-leave 始状态、.v-leave-to 末状态、.v-leave-active 离开动画

name属性 xxx

进入：.xxx-enter 始状态、.xxx-enter-to 末状态、.xxx-enter-active 进入动画

离开：.xxx-leave 始状态、.xxx-leave-to 末状态、.xxx-leave-active 离开动画

appear 属性：一开始就生效显示动画

<button @click='isShow=!isShow'>显示隐藏</button>
<transition name='hello'>
    <h1 v-show='isShow'>你好呀</h1>
</transition>
 
 ......
 
 data(){
     return{
         isShow:true
     }
 }

......

<style scope>
    h1{
    backgroundcolor:yello;
   
    }
    //进入的起点，离开的终点
    .hello-enter,.hello-leave-to{
         transform:tanslateX(-100%);
    }
  
    //进入的终点，离开的起点
    .hello-enter-to,.hello-leave{
        transform:tanslateX(0);
    }
    
    .hello-enter-active,hello-enter-leave{
          transition:0.5s linear;
    }
   
</style>

transition-group 标签

• transition 标签只能包含 1 个元素、 transition-group 标签可以包含多个元素
• transition-group 标签里面的元素需要设置 key 属性，作为当前元素的唯一标识

<button @click='isShow=!isShow'>显示隐藏</button>
<transition-group name='hello' appear>
    <h1 v-show='isShow' key='1'>你好呀</h1>
    <h1 v-show='!isShow' key='2'>很高兴见到你</h1>
</transition-group>
 
 ......
 
 data(){
     return{
         isShow:true
     }
 }

......

<style scope>
    h1{
    backgroundcolor:yello;
   
    }
    //进入的起点，离开的终点
    .hello-enter,.hello-leave-to{
         transform:tanslateX(-100%);
    }
  
    //进入的终点，离开的起点
    .hello-enter-to,.hello-leave{
        transform:tanslateX(0);
    }
    
    .hello-enter-active,hello-enter-leave{
          transition:0.5s linear;
    }
   
</style>

第三方插件

动画库：Animate.css