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%"},); #神坑:transform: translate3d(80%,0,0); 无法作为参数,必须修改为这种:translateX: 0%
Velocity(el,{translateX: "0%"},250,"ease");
velocityjs 动画库 比jquery默认的animate强的更多相关文章
- TweenMax动画库学习(一)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- TweenMax动画库学习
之前在做HTML5移动端开发的时候,用的都是Animate.css,这个插件封装的的确很好,但是在做一些缓动方面的动画,它也有一定的不足之处,比如手要写一个连续的动画,需要不停的去重复写函数,使得代码 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 转: css3动画简介以及动画库animate.css的使用
~~~ transition animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
- animate.css – 齐全的CSS3动画库
animate.css – 齐全的CSS3动画库 演 示 下 载 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...
- css3动画和animate.css动画库使用
CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...
- 【转载】css3动画简介以及动画库animate.css的使用
原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...
- Animate.css_css3动画库介绍
插件描述:Animate.css内置了很多典型的css3动画,兼容性好使用方便. Animate.css是一个有趣的,跨浏览器的css3动画库.很值得我们在项目中引用. 用法 1.首先引入animat ...
- 动画库animate.css的用法
简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...
随机推荐
- C语言常用知识
跳出for循环主要有以下2中方式: 1.用break语句.如: int i; for(i=0; i<10; i++) { if(i>3) // 如果i>3,跳出for循 ...
- SpringJMS解析3-监听器
消息监听器容器是一个用于查看JMS目标等待消息到达的特殊bean,一旦消息到达它就可以获取到消息,并通过调用onMessage()方法将消息传递给一个MessageListener实现.Spring中 ...
- css整理-02 颜色和字体
颜色 命名颜色 RGB指定颜色 数值: 0-255 百分比 三元组:红绿蓝 16进制RGB web安全颜色 在256色计算机系统上总能避免抖动的颜色 表示为rgb值20%和51的倍数 web安全色的简 ...
- Oracle PL/SQL设置快捷键的方法
pl sql默认设置不是很方便,最近搜罗了一下网上关于PLSQL的一些常用快捷键配置,主要是方便以后自个使用 1.登录后默认自动选中My Objects 默认情况下,PLSQL Developer ...
- WPF ,listbox,平滑滚动的2种方式。
一,烤地瓜版本的.. 这个版本不安装内容滚动,,鼠标滑轮滚动一次距离相同, 具体步骤参照他的博客,说点注意的,, 1,ScrollViewer.CanContentScroll="Fals ...
- bash脚本中的普通数组和关联数组
1. 普通数组 bash支持一维数组(不支持多维数组),并且没有限定数组的大小.类似与C语言,数组元素的下标由0开始编号.获取数组中的元素要利用下标,下标可以是整数或算术表达式,其值应大于或等于0. ...
- web开发的基础知识:http请求
引用自:http://blog.csdn.net/yefan2222/article/details/6198098 http://baike.baidu.com/view/1628025.htm?f ...
- HBase 学习笔记
1. HBase 的特点 1.线性扩展,自动分表 region的自动分裂以及master的balance 增加datanode机器即可增加容量 增加regionserver机器即可增加读写吞吐量 2. ...
- PHP历程(PHP与MYSQL数据库之间连接、创建和关闭)
<?php define('WXLEVELS_DB_HOST','127.0.0.1'); //服务器 define('WXLEVELS_DB_USER','root'); //数据库用户名 d ...
- BZOJ3424 : Poi2013 Multidrink
详细做法以及证明请看论文<Hamiltonian paths in the square of a tree>. 首先将1到n的路径提取出来,作为主干. 定义毛毛虫为去掉叶子之后只有一条单 ...