简述vue的过渡动画（二）：Javascript钩子

一、介绍

可以在attribute中声明Javascript钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

当只用Javascript过渡时，在enter和leave对应的函数中必须调用done回调函数

二、引入第三方插件 create-keyframe-animation

使用npm安装插件

npm install create-keyframe-animation

在组件中引入

import animations from 'create-keyframe-animation'

在methods中自定义动画效果：
1、根据需求定义animation
2、通过registerAnimation方法 注册animation
3、通过runAnimation方法 将动画绑定到指定的DOM元素上

methods:{
  enter(el, done) { 
      let animation = {
        0: {
          
        },
        50: {
          
        },
        100: {
          
        }
      }

      animations.registerAnimation({
        name: 'zoomIn',
        animation,
        presets: {
          duration: 400,
          easing: 'linear'
        }
      })

      animations.runAnimation(this.$refs.dom, 'zoomIn', done)
    },

然后在进入过渡结束后，解绑动画

  afterEnter() {
      animations.unregisterAnimation('zoomIn')
      this.$refs.dom.style.animation = ''
    }

leave和afterLeave也是同样的道理

关于此插件的更多API，请参考官方文档