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中自己写的：

                       .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，参照官网对其进行选样式

2.用法：

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

</transition>