神坑记录:

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

velocityjs 动画库 比jquery默认的animate强的更多相关文章

  1. TweenMax动画库学习(一)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  2. TweenMax动画库学习

    之前在做HTML5移动端开发的时候,用的都是Animate.css,这个插件封装的的确很好,但是在做一些缓动方面的动画,它也有一定的不足之处,比如手要写一个连续的动画,需要不停的去重复写函数,使得代码 ...

  3. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  4. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  5. animate.css – 齐全的CSS3动画库

    animate.css – 齐全的CSS3动画库 演 示 下 载   简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...

  6. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  7. 【转载】css3动画简介以及动画库animate.css的使用

    原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...

  8. Animate.css_css3动画库介绍

    插件描述:Animate.css内置了很多典型的css3动画,兼容性好使用方便. Animate.css是一个有趣的,跨浏览器的css3动画库.很值得我们在项目中引用. 用法 1.首先引入animat ...

  9. 动画库animate.css的用法

    简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...

随机推荐

  1. 自定义ActionBar

    /** * 1.创建ActionBar对象getSupportActionBar() * 2.布置自己的ActionBar布局(在res/layout) * 3.把自定义的ActionBar布局加载到 ...

  2. 一个linux的样本分析

    不久前收到的一个linux样本,之前linux平台下的样本见得并不多,正好做个记录. 样本启动之后,会将自身重命名拷贝到/usr/bin下,并删除自身,如此处就将自身文件amdhzbenfi命名为us ...

  3. Android如何缩减APK包大小

    代码 保持良好的编程习惯,不要重复或者不用的代码,谨慎添加libs,移除使用不到的libs. 使用proguard混淆代码,它会对不用的代码做优化,并且混淆后也能够减少安装包的大小. native c ...

  4. ++i与i++的区别

    1. ++i 和 i++,在单独使用时,就是 i=i+1. 2. a = ++i,相当于 i=i+1; a = i; (先i = i + 1,再使用i的值).也可以写成 i++; a=i 3. a = ...

  5. mongodb学习04 操作详解(2)

    查找文档 筛选查找 db.collection.find(); 返回一个集合中文档的子集,子集的 范围从 0 个文档到整个集合; db.collection.findOne(); 返回筛选的一个文档; ...

  6. VMware 锐捷 NAT模式的服务自动关闭的解决办法

    之前一直搞不定VMware和锐捷的问题,校园网,你懂的. 后来发现,使用NAT模式联网时,锐捷会间隔性地终结windows系统的那个关于NAT联网的服务,你可以在计算机管理 - 服务,找到一个写有NA ...

  7. Redis List命令

        命令 解释 lpush key string 在key对应list的头部添加字符串元素,返回1表示成功,0表示key存在且不是list类型. rpush key string 同上,尾插入. ...

  8. DedeCMS提交自定义表单加入验证码功能

    织梦dedecms网站给自定义表单加dede模板自带验证码的方法. 有时候,我们因为需要给dede网站的自定义表单添加验证码,防止恶意填写表单提交. 我们可以用以下的方法来实现: 首先,我们要找到 / ...

  9. 每天一个linux命令--退出<符号

    linux出现如下情况: [calendar@test190 logs]$ [calendar@test190 logs]$ [calendar@test190 logs]$ [calendar@te ...

  10. ccc 音乐播放

    cc.Class({ extends: cc.Component, properties: { musicPlayer: { default: null, type: cc.AudioSource } ...