vue动画（+animation、@keyframes的使用）

1、动画进入：

• v-enter：动画进入之前的初始状态
• v-enter-to：动画进入之后的结束状态
• v-enter-active：动画进入的时间段

PS：第一、第二个是时间点；第三个是时间段。

2、动画离开：

• v-leave：动画离开之前的初始状态
• v-leave-to：动画离开之后的结束状态
• v-leave-active：动画离开的时间段

PS：第一、第二个是时间点；第三个是时间段。

3、使用

<transition name="fade"> /* fade是别名，默认v-enter --> fade-enter*/
   <div>...</div>
</transition>

.fade-enter-active {
  animation: fadeIn 0.4s;       
}
.fade-leave-active {
  animation: fadeOut 0.4s;
}

@keyframes fadeIn {           // form起始时,等同于0%，to到达终点时，等同于100%
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

• animation属性说明：
  animation: name duration timing-function delay iteration-count direction;

属性	描述
animation-name	要绑定的 keyframes 动画名称
animateion-duration	完成动画所需的时间，以秒或毫秒计算
animateion-timing-function	动画的速度曲线（linear、ease、ease-in、ease-out…）
animateion-delay	动画开始之前是否延迟时间
animateion-iteration-count	动画播放次数 (n、infinite)
animation-direction	定义正向、反向播放动画 (normal、alternate)

4、列表动画

<!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
<!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
<!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
<!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
<transition-group appear tag="ul">
    <li v-for="(item, i) in list" :key="item.id">
        {{item.id}} --- {{item.name}}
    </li>
</transition-group>

.v-enter,
.v-leave-to {
     opacity: 0;
     transform: translateY(80px);
 }

 .v-enter-active,
 .v-leave-active {
     transition: all 0.6s ease;
 }

 /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */

 .v-move {
     transition: all 0.6s ease;
 }

 .v-leave-active {
     position: absolute;
 }