Vue中CSS动画原理
动画流程：(动画从无到有)
1.在动画即将被执行的一瞬间，会往内部的 div 添加 两个 class 名字，分别是 fade-enter 和 fade-enter-active;
2.当动画第一帧执行结束后，transition 标签分析知道这个 div 的动画效果，会在动画第二帧时做两件事：将之前添加的 fade-enter这个 class 标签去掉，再增加 fade-enter-to 这个标签；
3.动画继续执行，执行到结束的这一瞬间，Vue 会将之前添加的 fade-enter-active 和 fade-enter-to 去掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中CSS动画原理</title>
<script src='./vue.js'></script>
</head>
<body>
<div id ="root">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el:'#root',
data: {
show:true
},
methods:{
handleClick: function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>输出：点击 hello world 消失
以上述程序为例，当 div 被 transition 标签包裹时，会自动创建一个动画流程；在动画执行前，往 div 标签上添加 fade-enter 和 fade-enter-active 这两个 class 样式；
加入以下程序
<script src='./vue.js'></script>
<style>
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: opacity 3s;
}
</style>输出：
fade-enter-active 在动画第一帧时才存在，执行到结束的这一瞬间 fade-enter-active 才会被去掉；故设置 transition:opacity;
对 opacity 进行 transition 监控，如果监控到 opacity 发生变化，则让其在 3 秒内缓慢变化；fade-enter 只在第一帧时存在，第二帧时就被移除。故结合二者来看，在第一帧时，画面处于隐藏状态（opacity：0），运行到第二帧时，fade-enter 被移除 ，这时，opacity 变为原来的默认值 1，画面要出现，fade-enter-active 中的 transition 监控到 opacity 发生变化，让其在 3 秒内完成变化，画面将在3 秒由无到有的浮现出来！
补充：fade-enter-active 和 fade-enter 中的前缀 fade 是 transition的 name 值，其默认值为 v
动画流程：(动画从有到无)
1.在动画即将被执行的一瞬间，会往内部的 div 添加 两个 class 名字，分别是 fade-leave 和 fade-leave-active;
2.当动画第一帧执行结束后，transition 标签分析知道这个 div 的动画效果，会在动画第二帧时做两件事：将之前添加的 fade-leave这个 class 标签去掉，再增加 fade-leave-to 这个标签；
3.动画继续执行，执行到结束的这一瞬间，Vue 会将之前添加的 fade-leave-active 和 fade-leave-to 去掉
再添加代码：
<style>
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: opacity 3s;
}
.fade-leave-to{
opacity: 0;
}
.fade-leave-active{
transition: opacity 3s;
}
</style>输出：点击 3s 后隐藏，再点击 3s 后出现
fade-leave-active 在动画第一帧时才存在，执行到结束的这一瞬间 fade-leave-active 才会被去掉；故设置 transition:opacity;
对 opacity 进行 transition 监控，如果监控到 opacity 发生变化，则让其在 3 秒内缓慢变化；fade-leave-to 在第二帧时出现，最后时才被移除。故结合二者来看，在第一帧时，画面处于显示状态（opacity：1），运行到第二帧时，fade-leave 被移除 ，这时，opacity 变为 0，画面要隐藏，fade-leave-active 中的 transition 监控到 opacity 发生变化，让其在 3 秒内完成变化，画面将在3 秒由有到无的消失！
补充：v-if 和 v-show 都可以实现上述功能
