JS库--Velocity.js

心已赠人 2022-12-26 00:48 182阅读 0赞

原文网址：[JS库--Velocity.js\_IT利刃出鞘的博客-CSDN博客\_velocity库][JS_--Velocity.js_IT_-CSDN_velocity]

# 其他网址 #

> [Velocity.js的使用 - 小火柴的蓝色理想 - 博客园][Velocity.js_ - _ -]
> 
> [Velocity.js官网][Velocity.js]

# 简介 #

>  *  Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。
>  *  Velocity和jQuery的[animate()][animate]有相同的API， 但它不依赖 jQuery，可单独使用。可将原来使用jQuery的$.animate()替换成$.velocity()。
>  *  Velocity是jQuery的[animate()][animate]的增强版。Velocity有jQuery的[animate()][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][http_localhost_8080_compA]
> 
> ![20201203001412555.png][]
> 
> 点击按钮
> 
> ![20201203001458621.gif][]

[JS_--Velocity.js_IT_-CSDN_velocity]: https://knife.blog.csdn.net/article/details/110496901
[Velocity.js_ - _ -]: https://www.cnblogs.com/xiaohuochai/p/7404928.html
[Velocity.js]: http://velocityjs.org/#beginAndComplete
[animate]: http://www.shouce.ren/api/view/a/12992
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[20201203001412555.png]: /images/20221120/74c0b18eba5c4a76937984fe96d0b268.png
[20201203001458621.gif]: /images/20221120/f774839865e947f4b8029e7b8419f5c0.png