vue 动画（过渡）

Vue 提供了 transition 的封装组件，在条件渲染，展示，动态组件等情形中，可以给任何元素和组件添加进入/离开过渡。

例子：（点击按钮，下面的字展示与消失）

html

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

script

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

css

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

注意：对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v-是这些类名的默认前缀。如果你使用了 <transition name="fade">，那么前缀会换成fade-。

下面是官网对6个class切换的解释：

1、v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2、v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3、v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。（2.1.8版本及以上）

4、v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5、v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6、v-leave-to:  定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。（2.1.8版本及以上）

看图可能理解的会更清晰一些：

 项目中应用到的实例：

<transition name="info-mask">
  <div class="dialog-mask" v-show="show">
    <div class="info-dialog">
      <div class="info-dialog-con">
         <input type="text" name="name" placeholder="请输入姓名" v-model="name">
         <input type="text" name="phone" placeholder="请输入手机号" v-model="phone">
         <div class="submitBtn">
         <span class="enableBtn">提交</span>
       </div>
      </div>
    </div>
 </div>
</transition>    

点击按钮弹出一个输入框，要求用户输入姓名手机号等信息，在项目中对这个输入框的弹出关闭增加了动效

  .info-mask-enter-active, .info-mask-leave-active {
    transition: all ease .3s;
  }
  .info-mask-enter, .info-mask-leave-to {
    opacity: 0;
  }

那么info-mask作为样式类名的前缀，弹框在show或是close的时候用0.3s做出缓慢过渡的效果。