Vue中的动画

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

使用过渡类名

1. HTML结构：

   <div id="app">
        <input type="button" value="动起来" @click="myAnimate">
        <!-- 使用 transition 将需要过渡的元素包裹起来 -->
        <transition name="fade">
          <div v-show="isshow">动画哦</div>
        </transition>
      </div>

2. VM 实例：

 // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        isshow: false
      },
      methods: {
        myAnimate() {
          this.isshow = !this.isshow;
        }
      }
    });

3. 定义两组类样式

/* 定义进入和离开时候的过渡状态 */
    .fade-enter-active,
    .fade-leave-active {
      transition: all 0.2s ease;
      position: absolute;