神坑记录:

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. Android 自定义title 之Action Bar

    Android 自定义title 之Action Bar 2014-06-29  飞鹰飞龙...  摘自 博客园  阅 10519  转 25 转藏到我的图书馆   微信分享:   Action Ba ...

  2. python数学运算的类型转换

    类型转换 Rational类实现了有理数运算,但是,如果要把结果转为 int 或 float 怎么办? 考察整数和浮点数的转换: >>> int(12.34) 12 >> ...

  3. jsp遍历、循环

    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 1. <% Te ...

  4. poj1328 贪心

    http://http://poj.org/problem?id=1328 神TM贪心. 不懂请自行搜博客. AC代码: #include<cstdio> #include<algo ...

  5. no-jquery 02 DOM

    DOM Manipulation Creating Elements // IE 5.5+ document.createElement('div'); Inserting Elements Befo ...

  6. fzu月赛 2203 单纵大法好 二分

    Accept: 8    Submit: 18Time Limit: 5000 mSec    Memory Limit : 65536 KB  Problem Description 人在做,天在看 ...

  7. 在字符界面tty1~tty6中使用鼠标,并用其复制粘贴

    1. 安装 无意间看到gpm这个服务可以让你在tty1~tty6 环境中使用鼠标. 先用 rpm -qa gpm 查看是否已经安装此服务,如果提示以安装,则可以直接开启: 否则就要通过 yum ins ...

  8. shinydashboard包---为shiny提供BI框架

    1.安装 install.packages("shinydashboard") 2.基础知识 仪表盘有三个部分:标题.侧边栏,身体.下面是最最小的仪表面板页面的UI: ## ui. ...

  9. js jQuery笔记

    jQuery 1.几种获取子元素的方法及区别 children方法获得的仅仅是元素一下级的子元素,即:immediate children. find方法获得所有下级元素,即:descendants ...

  10. BZOJ 1412 & 最小割

    什么时候ZJ省选再现一次这么良心的题吧... 题意: 在一个染色的格子画分割线,使其不想连,求最少的线段 SOL: 裸裸的最小割.题目要求两种颜色不想连,我们把他分到两个集合,也就是把所有相连的边切断 ...