Velocity.js--使用/教程/实例

​

简介

        本文介绍JavaScript的动画库velocity.js的用法。

Velocity.js简介

​官网​

​​Velocity.js官网​​

​Velocity.js说明​

• Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。
• Velocity和jQuery的​​animate()​​有相同的API， 但它不依赖 jQuery，可单独使用。可将原来使用jQuery的$.animate()替换成$.velocity()。
• Velocity是jQuery的​​animate()​​​的增强版。Velocity有jQuery的​​animate()​​的所有功能，还拥有额外的功能，例如：

• 不仅支持duration，还支持loop、delay、display等。
• 还拥有：颜色动画、转换动画(transforms)、缓动、SVG动画和滚动动画等特色功能。

• Velocity比$.animate()更快更流畅，性能甚至高于CSS3 animation，是jQuery和CSS3 transition的最佳组合，它支持所有现代浏览器，最低可兼容到IE8和Android 2.3

实例

​1.在工程目录下安装velocity-animate​

npm install velocity-animate

​2.导入​

import  Velocity from 'velocity-animate' 

​components/CompA.vue ​

<template>
  <div class="compA">
    <button @click="toggle">toggle</button>
    <transition name="trans" :css="false"
                @before-enter="beforeEnter"
                @enter="enter"
                @leave="leave">
      <p v-if="show">Demo</p>
    </transition>
  </div>
</template>

<script>
import Velocity from "velocity-animate"

export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    },

    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.transformOrigin = 'left';
    },

    enter(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: 400})
      Velocity(el, {rotateZ: '100deg'}, {loop: 2})
      Velocity(el, {rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0}, {complete: done})
    }
  }
}
</script>

<style scoped>
</style>

​3.路由​

​router/index.js ​

import Vue from 'vue'
import Router from 'vue-router'
import CompA from "@/components/CompA";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/compA',
      name: 'compA',
      component: CompA
    }
  ]
})

​4.测试​

访问：​​http://localhost:8080/#/compA​​

点击按钮