神坑记录:

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. jQuery.lazyload详解

    <SCRIPT src="jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="jq ...

  2. SU Demos-05Sorting Traces-02Demos

    运行结果: 不足之处,欢迎批评指正.

  3. css -- 布局元素

    默认情况下拥有布局的元素:HTML ,table,tr,td,img,hr,input,select,textarea,button,iframe,embed,object,applet,marque ...

  4. JetS3t使用说明

    http://blog.csdn.net/hitmediaman/article/details/6636402

  5. 树状数组 + 位运算 LA 4013 A Sequence of Numbers

    题目传送门 题意:n个数,两种操作,一是每个数字加x,二是查询& (1 << T) == 1 的个数 分析:因为累加是永远的,所以可以离线处理.树状数组点是c[16][M] 表示数 ...

  6. oracle存储海量数据 设计方案

    日历基本活动表的数据有四千万条,在这些生产库业务中是小的了. 从三个方面提高效率: 1.sql语句 要绑定变量,sql语句书写规范这些,包括的就多了.主要目的就是提高数据库吞吐量及业务SQL响应时间. ...

  7. BZOJ4110 : [Wf2015]Evolution in Parallel

    首先每个串都必须是$S$的子序列,否则无解. 按长度从小到大依次考虑每个串,如果它两边都不能放,那么无解. 如果能放一边,那么放进去,把待定的全部放入另一边. 如果两边都能放,那么看看能否待定,如果不 ...

  8. POJ 2456 (二分)

    题目链接: http://poj.org/problem?id=2456 题目大意:n个房子,m头牛,房子有一个横坐标,问将m头牛塞进房子,每两头牛之间的最大间隔是多少. 解题思路: 不难看出应该二分 ...

  9. OpenResy+Lua 利用百度识图 将图片地址解析成文字

    LUA代码:(注:LUA里有一个调用百度识图的接口IP:123.125.115.189(stu.baidu.com),不知为什么我的虚拟机无法解析stu.baidu.com,所以我只能PING出IP来 ...

  10. topcoder SRM 617 DIV2 SlimeXSlimonadeTycoon

    此题需要注意的两个地方是 (1)在某天生产出来的Slimonades,必须在stale_limit天内必须卖完,否则超过stale_limit内抛弃(东西都有保质期) (2)每天生产出来的Slimon ...