一、CSS3动画animation
keyframes被称为关键帧，其类似于flash中的关键帧。在css3中其主要以“@keyframes"开头，后满紧跟着是动画名称加上一对花括号{...}，括号中就是一些不同时间段样式规则
在一个"@keyframes"中的样式规则可以有多个百分比构成的，如在”0%"到"100%"之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
当你在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
1.规定动画的名称
2.规定动画的时长
div {
animation:changecolor 5s;
-moz-animation: changecolor 5s; /* Firefox */
-webkit-animation: changecolor 5s; /* Safari 和 Chrome */
-o-animation: changecolor 5s; /* Opera */
}
二、Vue的v-if动画
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
1.条件渲染 (使用 v-if)
2.条件展示 (使用 v-show)
3.动态组件
4.组件根节点
一个典型的例子：
HTML:
<div id="app">
<transition name="fade">
<div v-if="show">
Hello world.
</div>
</transition>
<button @click="handleClick">切换</button>
</div>
JS:
<script>
// 1. 创建Vue的实例
let vm = new Vue({
el:'#app',
data:{
show:false
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
});
</script>
CSS:
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
.v-leave 当前元素准备从显示转变成隐藏，在动画开始前添加到元素上，动画一旦开始会立即删除；
.v-leave-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；
.v-leave-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；
事例中，当点击 button，div 并不会马上 display: none， 而是首先设置 .v-leave ，下一刻即删除 .v-leave ，同时添加 .v-leave-active .v-leave-to，当 .v-leave-active 中的过渡时间执行完成，则删除 .v-leave-active .v-leave-to，同时添加 display: none。
.v-enter 当前元素准备从隐藏转变成显示，在动画开始前添加到元素上，动画一旦开始会立即删除；
.v-enter-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；
.v-enter-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；
事例中，当点击 button，div 马上清除 display: none， 然后设置 .v-enter ，下一刻即删除 .v-enter ，同时添加 .v-enter-active .v-enter-to，当 .v-enter-active 中的过渡时间执行完成，则删除 .v-enter-active .v-enter-to。
