【Vue】vue2 过渡搭配Velocity.js动画的基本使用

Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。Velocity.js 中文文档

1.安装

npm i velocity-animate

2.导入

velocity.ui.js 是 velocity.js 的 动画插件(1.8 KB ZIP’ed) 我们可以用它快速创建炫酷的动画特效，它依赖于 velocity.js

import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'

3.使用

在使用Vue的过渡时可以在 attribute 中声明 JavaScript 钩子,详情见官方文档

<transition v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
    <!-- 需要执行动画的内容 -->
  </transition>

/**
     * @description: 进入动画
     * @param {Object} el 触发动画的元素
     * @param {Function} done 动画函数已经执行完毕
     */
    enter(el, done) {
      Velocity(
        el,
        'transition.shrinkIn',
        {
          duration: 500
        },
        function() {
          done()
        }
      )
    },

    /**
     * @description: 离开动画
     * @param {Object} el 触发动画的元素
     * @param {Function} done 动画函数已经执行完毕
     */
    leave(el, done) {
      Velocity(
        el,
        'transition.shrinkOut',
        {
          duration: 500
        },
        function() {
          done()
        }
      )
    }