velocityjs 动画库 比jquery默认的animate强

神坑记录:

 1、transform: translate3d(80%,0,0); 无法作为参数,必须修改为这种:translateX: 0%

 

官方文档

http://velocityjs.org/

github地址

https://github.com/julianshapiro/velocity

npm下载安装

npm install velocity-animate --save-dev

调试地址

http://codepen.io/julianshapiro/full/oHaCy/

 

坑点和注意点:

理论来说,JS对于操作CSS的权限应该是最大的。但是经过实践。我发现 Velocity 中指定的 duration 属性权限是最小的。即渲染的时候,优先计算顺序为:style->css->duration 

也就是说,如果对象想正常使用Velocity 的 duration 属性,必须确保对象的css中没有绑定任何css3的trantions

 

基本使用

#el 为 dom对象
Velocity(el,{translateX: "80%"},0);


#神坑:transform: translate3d(80%,0,0); 无法作为参数,必须修改为这种:translateX: 0%
Velocity(el,{translateX: "0%"},250,"ease");

 

posted @ 2016-10-21 10:59  贝尔塔猫  阅读(1403)  评论(0编辑  收藏  举报