vue里面使用Velocity.js

英文文档: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)
				
时间: 2024-10-03 23:07:25

vue里面使用Velocity.js的相关文章

05.vue中js动画与Velocity.js的结合

vue中js动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中js动画</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>

Vue中的JS与Velocity.js的结合

JS动画效果,注意事件函数中所传递的传递的参数及某些事件函数返回的函数 1.进入动画钩子:before-enter,enter,after-enter; 2.离开动画钩子:before-leave,leave,after-leave; 3.在enter钩子中的函数调用done()告诉Vue,JS动画完成. 4.使用velocity.js动画库实现动画:Velocity(el,{样式属性},{duration:1000,complete:done}) <!DOCTYPE html> <ht

Velocity.js

极棒的jquery动画切换引擎插件Velocity.js.  duration:时长   delay:动画延时时间 1:手动维护  2:complete:一层层嵌套 3:推荐 -----------------------------  没有想要的效果:  案例: index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹出式相框</t

分享JQuery动画插件Velocity.js的六种列表加载特效

分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc

javascript动画:velocity.js学习

第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个元素后,就可以用这个元素去调用.velocity()为它添加动画效果.例如: //将一个变量分配给某个jQuery元素对象. var $div = $(“div”); //使用velocity设置该元素的动画 $div.velocity({ opacity : 0 }); //该句语法与jQuery

利用velocity.js将svg动起来

关于velocity.js Velocity.js是一款jquery动画引擎插件,它拥有与jquery中的$.animate()相同的API,还打包了颜色动画,转换,循环,easing效果,类动画.滚动等功能,因此大家可以像使用$.animate()方法一样使用velocity,您可以快速的上手velocity.js.简单点说:Velocity就是实现页面元素中的飞入,飞出,旋转.颜色变换,esaing效果的jquery插件库. 当然我们可以自定义我们的动画,比较好用的是我们可以设定动画序列,方

JQuery动画插件Velocity.js发布:更快的动画切换速度

5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换 在动画方面的最佳组合.Velocity.js支持IE8+.Chrome

Velocity.js应用基础(一)

Velocity.js是一款优秀的js动画插件,内部模拟jquery的queue队列来实现animate效果.可以实现css3中的变形缩放等功能特效,速度和性能优于jquery和css3自定义动画.兼容流行js框架,体积小,压缩后仅有7K大小. 内部实现可参考官方API文档,或者阅读程序源码.文末将会给出官网地址. Velocity.js提供基本的动画功能,如果有需要,可以引入扩展插件——Velocity.ui.js. 如果html文档有引入jquery的话,js文件的引入顺序应该为: 1 <s

velocity.js用法整理1

velocity.js 此框架相对于JQ的运动算法, 有很大的优势. 例如,A和B两个元素,position:absolute;  top:0; 现在让A元素用JQ的animate,B用velocity,1秒内改变top值为500.此时,可以明显的看出区别,使用JQ运动的元素运动起来效果非常不平滑,velocity的元素非常平滑. 这只是velocity各种强大里的一个基本方面,还有很多JQ无法直接实现的功能. 英文API地址:http://www.julian.com/research/vel