leave
隐藏的动画流程：
隐藏的第一个瞬间时，Vue 会在dom上添加两个class，分别是v-leave和v-leave-active
运行到第二帧时，Vue 会将v-leave移除，再添加一个v-leave-to
接着动画会继续执行，执行到结束的一瞬间，Vue 会把之前添加的v-leave-to和v-leave-active都删除。
.fade-leave-to{
opacity: 0;
}
.fade-leave-active{
transition: opacity 3s;
}
<div id="root">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
</div>
let vm = new Vue({
el: '#root',
data: {
show:true
},
methods: {
handleClick(){
this.show = !this.show
}
}
})
为什么加了这两个css动画效果就出来了呢？
从动画执行的第一个瞬间，到动画执行完毕，fade-leave-active这个class都存在。也就是在动画运行过程中，我要时刻监听div的opacity，一旦opacity发生变化，我要让让他在3s内执行完毕。
在第一个瞬间fade-leave的opacity为1，就是显示状态；第二个瞬间opacity为0了，此时要给它添加一个fade-leave-to的class，而fade-leave-active一直在监听opacity的变化，一旦opacity发生变化，会让它在3s内完成
自定义class
如果我不想用 Vue 提供的这六个class，我想自定义一个class，该怎么实现呢？
.active,.leave{
transition: opacity 3s;
}Vue 给我们提供了一个自定义的属性的方法，使用enter-active-class就能自定义一个enter类；使用leave-active-class就用自定义一个leave类。
<transition name="fade"
enter-active-class="active"
leave-active-class="leave"
<div v-if="show">hello world</div>
</transition>
利用这个特性，在项目中需使用复杂的css样式时，就可以引入第三方css样式库，这里介绍一个animate.css的库。
使用第三方库（animate.css），需要注意两点：
必须使用自定义class的方式
自定义class中必须有一个animated的class
<transition name="fade"
enter-active-class="animated swing"
leave-active-class="animated shake"
<div v-if="show">hello world</div>
</transition>上面是按钮点击了才会出现动画效果，但此时需求想要实现一入场就有动画效果该怎么实现呢？
<transition name="fade"
