velocity.js 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，最低可兼容到 IE8 和 Android 2.3。
Velocity 目前已被数以千计的公司使用在自己的项目中，包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等，这里Libscore.com 统计了哪些站点正使用 velocity.js。
安装 npm install velocity-animate@beta
页面引入： import Velocity from 'velocity-animate'
全局引入：import Velocity from "velocity-animate"; 然后在他原型上设置Vue.prototype.$bus = Velocity;要在页面上使用Velocity直接用this.$bus就行
示例代码：
<template>
<div>
<button @click="show = !show">Toggle</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">Demo</p>
</transition>
</div>
</template>
<script>
// import this.$bus from "this.$bus-animate";
export default {
data() {
return {
show: false,
};
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0;
el.style.transformOrigin = "left";
},
enter: function (el, done) {
this.$bus(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 });
this.$bus(el, { fontSize: "1em" }, { complete: done });
},
leave: function (el, done) {
this.$bus(el, { translateX: "15px", rotateZ: "50deg" }, { duration: 600 });
this.$bus(el, { rotateZ: "100deg" }, { loop: 2 });
this.$bus(
el,
{
rotateZ: "45deg",
translateY: "30px",
translateX: "30px",
opacity: 0,
},
{ complete: done }
);
},
},
};
</script>
<style lang="scss" scoped></style>
