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