下面这段代码，是点击按钮实现 hello world 显示与隐藏
<div id=”root”>
<div v-if=”show”>hello world</div>
<button @click=”handleClick”> 按钮 </button>
</div>
let vm = new Vue({
el: ‘#root’,
data: {
show:true
},
methods: {
handleClick(){
this.show = !this.show
}
}
})
此时有一个需求，希望是在显示与隐藏时，能实现渐隐渐现的动画效果。
<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
}
}
})
如果希望 hello world 有一个动画效果的话，需要在外面套一层 transition 标签，意思它包裹的内容，有一个动画效果，可以给它一个名字 name=”fade”。
enter
当一个元素被 transition 标签包裹之后，Vue 会自动的分析元素的 css 样式，然后构建动画流程
在动画还没有执行的一瞬间，Vue 会帮我们在 dom 标签上添加两个 class，分别是 fade-enter、fade-enter-active。
当动画第一帧执行结束之后，transition 这个标签分析过，里面有一个动画效果，Vue 会在动画运行到第二帧的时候，会将 dom 标签上 v -enter 的 class 删除，再添加一个 v -enter-to 的 class。
接着动画会继续执行，执行到结束的一瞬间，Vue 会干一件事，它会把之前添加的 v -enter-to 和 v -enter-active 都删除，
.fade-enter{
opacity: 0;
}
.fade-enter-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-enter 和 fade-enter-active 分别写上样式就行了。这里要注意的是 Vue 中默认以 v 开头，如：v-enter，transition 加个 name 属性，就可以用 name 属性值做开头，如：fade-enter。
现在这里两个 class 的意思是：动画还没执行时，就已经有 fade-enter，fade-enter-active，动画第一帧运行时 fade-enter 就会被移除，css 效果 opacity: 0 就会变成 opacity: 1，直到动画执行完 fade-enter-active 才会被移除，这期间它用 transition 对 opacity 进行监控，需要 3s 才能完成。
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 的库。
使用第三方库，需要注意两点：
必须使用自定义 class 的方式
自定义 class 中必须有一个 animated 的 class
最后
在 transition 标签中中不光 v -if 能控制显示隐藏，v-show 也能控制显示隐藏，甚至动态组件也行。只要在 transition 中标签中动画发生变化，都会有一个过渡效果