vue中动画函数钩子js动画

1. 动画开始：@before-enter      @before-leave

    动画过程： @enter                 @leave    在这个过程中有done方法，表示动画结束，done方法执行时，就会触发动画结束函数

    动画结束：@after-enter          @after-leave

注意：动画变化，不是过渡。

  <div id="demo">
    <button @click="show = !show">click me</button>
    <transition name="fade" 
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter">
      <div v-if="show" class="de">sfsf</div>
    </transition>
  </div>
  <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      },
      methods: {
        handleBeforeEnter(dom) {
          dom.style.color = 'red'
        },
        handleEnter (dom, done) {
          setTimeout( () => {
            dom.style.color = 'green'
          }, 3000)
          setTimeout( () => {
            done()
          }, 6000)
        },
        handleAfterEnter (dom) {
          dom.style.color = 'black'
        }
      }
    })
  </script>

2. 使用第三方js动画库 velocit.js

在过渡过程@enter 和 @leave两个函数中，要按第三方库的写法来写（velocity.js）

  <div id="demo">
    <button @click="show = !show">click me</button>
    <transition name="fade" 
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter">
      <div v-if="show" class="de">sfsf</div>
    </transition>
  </div>
  <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      },
      methods: {
        handleBeforeEnter(dom) {
          dom.style.opacity = 0
        },
        handleEnter (dom, done) {
          Velocity(dom, {opacity: 1}, {duration: 3000, complete: done})
        },
        handleAfterEnter (dom) {
          console.log("complete animation")
        }
      }
    })
  </script>

结果：opacity的设置时过渡，而对color颜色的设置，不是过渡效果