transition标签过渡动画的原理:
当一个元素被transition包裹了之后，Vue会自动分析元素的css样式,然后构建一个动画的流程.
上图的线加上几个点就是动画从的流程，在动画即将被执行的这一瞬间，他会往内部的div上增加两个class,分别是fade-enter和fade-enter-active,当动画第一帧执行结束之后，Vue会在动画执行到第二帧的时候，fade-enter这个class会被去掉，然后增加一个名为fade-enter-to的class,接着动画会继续执行，执行到结束的这一瞬间，Vue会把fade-enter-actice和fade-enter-to两个class去除掉。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
<style>
/*因为我们给transition起的名字是fade，所以calss的前缀是fade,
如果不给transition起名字,默认的前缀是v,例如v-enter*/
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="root">
<transition name="fade">
<div v-if="show">Hello World</div>
</transition>
<button @click="handleClick">change</button>
</div>
<script>
var vm = new Vue({
el:'#root',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
上面这段代码实现了一个渐变出现Hello World的效果，因为fade-enter在第二帧的时候就被去掉了，元素的opacity变回1，而transition监听了opacity属性，就实现了一秒透明度从0到1的效果。
上面是动画从隐藏到显示的一个流程，而显示到隐藏的流程与它类似：
以上是Vue中的transition过渡的动画原理。
实际上，Vue里面的CSS动画是通过在某一时刻自动往一些标签上增加一些样式来实现的。