vue中css动画原理

显示原理：

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

当一个元素被transition包裹了之后，vue会自动当分析元素的css样式，然后构建一个动画的流程，在动画即将被执行的一瞬间，vue会在内部标签上增加两个class名字，分别是fade-enter,fade-enter-active,在动画执行到第二帧的时候，也就是动画开始后，fade-enter会变成fade-enter-to,动画执行到最后到时候，vue会干一件事情，把之前添加到fade-enter-to,fade-enter-active这两个class去除掉

<style>
.fade-enter{
　　opacity: 0;
}
.fade-enter-active{
　　transition: opacity 3s;
}
</style>
<div id='app'>
　　<transition name='fade'>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切换</button>
</div>

<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>

在第0s的时候样式由fade-enter控制，透明度为0,当第二帧的时候，透明度在3s内由0到1过度，如果transition的name不写，默认样式是v-enter, v-enter-active

隐藏原理

当一个元素被transition包裹了之后，元素由显示到隐藏，是这样一个流程，在隐藏的第一个瞬间，vue会给元素新增两个class，fade-leave,fade-leave-active,在第二帧的时候，会把fade-leave去掉，更新为fade-leave-to，在最后的时候，会把fade-leave-to,fade-leave-active都去除掉

<style>
.v-enter{
　　opacity: 0;
}
.v-enter-active{
　　transition: opacity 3s;
}
.v-leave-to{
　　opacity: 0;
}
.v-leave-active{
　　transition: opacity 3s;
}
</style>
<div id='app'>
　　<transition>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切换</button>
</div>

<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>

加上上面两个class隐藏的效果就出来了，为什么呢，从动画开始到结束，fade-leave-active都存在，也就是在动画运行的过程中，时刻监听着这个opacity这个属性，一旦opacity发生变化，就让opacity在3s中慢慢的进行过度，在第一瞬间,也就是fade-leave的时候,opacity还是显示的，为1

这种动画效果，叫做过渡的动画效果，也叫css动画