简述vue的过渡动画（一）：类名

当插入或删除包含在transition组件中的元素时
Vue会自动嗅探元素是否应用了CSS过渡，如果是，则会在恰当的时机添加/移除CSS类名

一、过渡类名

在进入/离开的过渡中，会发生6个class的切换
1、v-enter
定义进入过渡的开始状态
在元素被插入前生效，在元素被插入后的下一帧移除
2、v-enter-active
定义进入过渡生效时的状态，在整个进入过渡阶段中应用
在元素被插入前生效，在进入过渡结束后移除
（常用来定义进入过渡的时间、延迟和曲线函数）
3、v-enter-to
定义进入过渡的结束状态
在元素被插入后的下一帧生效，在进入过渡结束后移除

---

4、v-leave
定义离开过渡的开始状态
在离开过渡被触发时立刻生效，下一帧被移除
5、v-leave-active
定义离开过渡生效时的状态，在整个离开过渡阶段中应用
（同理：常用来定义离开过渡的时间、延迟和曲线函数）
6、v-leave-to
定义离开过渡的结束状态
在离开过渡被触发后的下一帧生效，在离开过渡结束后移除
示意图如下：

二、transition类名

如果transition标签中没有定义name属性
那么v- 就是这些类名的前缀
如果定义了 name="my-transition"
那么上述的类名都应该以 my-transition- 为前缀

三、简单的实例

当点击左上角的小图标时，我们希望：
1、顶部栏在向上移动的过程中慢慢消失
2、底部栏在向下移动的过程中慢慢消失

同理：我们希望播放器界面出现时
1、顶部栏从屏幕顶部坠落下来
2、底部栏从屏幕底部移动上来

相关代码如下：

<template>
  <transition name="normal">
    <div class="normal-player">
      <div class="top">
      </div>
      <div class="bottom">
      </div>
    </div>
  </transition>
</template>

在enter-active和leave-active中定义过渡持续的时间
在enter和leave-to中 定义组件 进入过渡的起始位置/离开过渡的结束位置

<style scoped lang="stylus">
.normal-player
  &.normal-enter-active, .normal-leave-active
    transition: all 0.4s
  &.normal-enter, &,normal-leave-active
    opacity: 0
    .top
      transfrom: translate3d(0, -100px, 0)
      .bottom
      transfrom: translate3d(0, 100px, 0)
</style>

transform属性的更多取值 请参考官方文档