SOURCE

vm1 = new Vue({
  el: '.demo1',
  data: {
    show: true
  }
})

vm2 = new Vue({
  el: '.demo2',
  data: {
    show: true
  }
})

vm3 = new Vue({
  el: '.demo3',
  data: {
    show: true
  }
})

vm4 = new Vue({
  el: '.demo4',
  data: {
    show: true
  }
})

vm5 = new Vue({
  el: '#demo5',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<script src="//cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>

<!-- demo1 -->
<div class="demo1">
  <button @click="show = !show">切换过渡</button>
  <transition name="fade">
    <span v-if="show">Hello</span> 
  </transition>
</div>

<hr />
<!-- demo2 -->
<div class="demo2">
  <button @click="show = !show">切换过渡类</button>
  <transition name="slide-fade">
    <div v-show="show">
      <p>ajsdkfjadfjlaksd</p>
      <p>ajsdkfjadfjlaksd</p>
      <p>ajsdkfjadfjlaksd</p>
    </div>
  </transition>
</div>

<hr />
<!-- demo3 css动画 -->
<div class="demo3">
  <button @click="show = !show">动画切换</button>
  <transition name="bounce">
    <div v-if="show">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
    </div>
  </transition>
</div>

<!-- demo4 自定义动画类名，可以结合其他动画库使用 -->
<hr />
<div class="demo4">
  <button @click="show = !show">切换显示4</button>
  <transition
              name="custom-classes-transition"
              enter-active-class="animated fadeInUpBig"
              leave-active-class="animated hinge"
              >
    <p v-if="show">Hello</p>
  </transition>
</div>



<!-- demo5 js钩子 使用velocity库-->
<hr />
<div id="demo5">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>

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

/* demo2 */
.slide-fade-enter, .slide-fade-leave-to{
  transform: translateX(10px); // 初始位置，右移10px // vue默认朝0值过渡
  opacity: 0; // opacity默认值是1, 自动朝1值过渡
}
.slide-fade-enter-active {
  transition: all 0.5s ease; // 定义进场动画
}
.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(0.760, 0.540, 0.340, 0.825); // 定义离场动画
}


/* demo3 css 动画 */
/* 
  同css过渡
  关键字animation
*/
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}