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");