动画第一帧：v-enter v-leave
动画最后一帧： v-enter-to v-leave-to
动画属性时间等过程：v-enter-active v-leave-active
如果没有写第一帧或最后一帧，那么默认是动画开始前的值，动画结束后的值
v-leave无效的原因？？？
<style>
.fade-leave-active {
transition: font-size 5s;
}
.fade-leave-to {
font-size: 50px
}
.fade-enter {
font-size: 40px;
}
.fade-enter-active {
transition: font-size 3s;
}
.fade-enter-to {
font-size: 20px
}
</style>
</head>
<body>
<div id="demo">
<button @click="show = !show">click me</button>
<transition name="fade">
<div v-if="show" class="de">sfsf</div>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
</body>该方法动画结束后，还是会回到代码设置的状态。就是抛开动画效果，代码设置的什么样子，结果就是什么样子。
特点：用transition name来包裹一个显示/隐藏的标签