vue_动画钩子函数_使用Velocity.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
  
  </style>
</head>
<body>
  <div id="app">
    <h3>同时使用过渡和动画</h3>
    <!-- 使用v-on绑定钩子函数 -->
    <transition 
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
    >
      <h2 v-if="show">hello world</h2>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
</body>
<script type="text/javascript">

  let vm = new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      // 当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
      //  入场动画以前
      beforeEnter (el) {
        // el:代表transition包裹的元素
        el.style.color = 'red'
      },
      // beforeenter执行完以后执行
      // 表示进入动画
      enter (el, done) {
        setTimeout(()=>{
          el.style.color = 'green'
        },1000)
        // done()表示动画执行完成
        setTimeout(()=>{
          done()
        },3000)
      },
      // 在动画done()执行完后在指定afterEnter函数
      afterEnter (el) {
        el.style.color="black"
      },
      //离场动画
      //使用velocity.js
      beforeLeave (el) {
        el.style.opacity = 1
      },
      leave (el, done) {
        Velocity(el, {
          opacity: 0 // 过渡动画的样式
        }, {
          duration: 1000,//动画过渡时长
          complete: done //表示动画结束后自动执行done函数
        })
      },
      //done()函数执行以后自动调用afterleave函数
      afterLeave (el) {
        console.log('动画完成')
      },
      handleClick () {
        this.show = !this.show
      }
    }
  })
</script>
</html>