Vue是一个css的动画原理

把要渲染的标签放在transition里；

当被transition包裹是，Vue会为标签增加两个样式 fafe-enter fade-enter-active 当开始时.fade-enter会去除结束时.fade-leave-to .fade-leave-active

<transition name="fade"> 
            <div v-if="show" >hello world</div>
</transition>

<button @click="change">change</button>

 

 

var app = new Vue({
el:'#app',
data:{
show:true
},
methods:{
change:function(){
this.show=!this.show
}
}


})

在style中自己写的：

//另一种css3用法                  

@keyframes bounce-in{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}

 

 

     .fade-enter{
                opacity: 0;
            }
            .fade-enter-active{
                transition: opacity 3s;
            }
            .fade-leave-to{
                opacity: 0;
            }
            .fade-leave-active{
                transition: opacity 3s;
            }

 

另一种方法：

为类名取名字：

<transition name="fade" fade-enter-active="active"     fade-leave-active="leave">
<div v-if="show" >hello world</div>
</transition>

style就简写了为其等于的名字

 

 

使用animate.css

1.首先引入animate.css，参照官网对其进行选样式

初始化就有动画加 appear  appear-active-class="animated swing"

当过渡和动画同时存在     加type=“transition”     是以过度的为总时长

加  ：duration=“enter：5000，leave：5000”

 

2.用法：

<transition name="fade"  

enter-active-class="animated swing"  
leave-active-class="animated shake">  
                
<div v-if="show" >hello world</div>

</transition>

 

同时使用过度和动画