显示原理：
<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动画
原文地址：https://www.cnblogs.com/wzndkj/p/9678652.html