CSS3及Vue动画效果

一、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。