vue里面使用Velocity.js

Posted 2020-09-28 zhaobao1830

英文文档：http://velocityjs.org/

中文手册（教程）：http://www.mrfront.com/docs/velocity.js/ 

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。

 

Vue中如何使用：

安装  npm install velocity-animate --save-dev

页面引入： import  Velocity from ‘velocity-animate‘

使用：

1 Velocity($(‘.myDrag‘), {width: drSwidth, height: drSheight, left: drSleft, top: drStop}, 500)
2  Velocity($(‘.myIframe‘), {width: drCw, height: drCh}, 500)