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).旋 ...
随机推荐
- hdu 5690 All x
All X Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submiss ...
- UVA 11475 后缀数组/KMP
题目链接: 题意:给定一个只含字母的字符串,求在字符串末尾添加尽量少的字符使得字符串为回文串. 思路:因为只能从末尾添加字符,所以其实求的是最长的后缀回文串.那么添加的字符为除了这个原串的最长后缀回文 ...
- JavaScript笔试必备语句
1. document.write( " "); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document- >html- >(head,bod ...
- zepto的bug1
给页面<a>标签绑定了tap事件,在移动设备上点击按钮貌似一切正常,可以正常响应. 但是,把页面上下滑动几次之后,或者在滑动时手指滑动出移动屏幕之外,之后再点击按钮,就会发现第一次点击的时 ...
- wpf,CollectionViewSource,使用数据过滤 筛选 功能。
class TextListBoxVMpublic : ViewModelBase { public TextListBoxVMpublic() { var list = this.GetEmploy ...
- docker不稳定 short running containers with -rm failed to destroy
正常运行以下命令 sudo docker run --rm busybox echo helloworld /var/log/upstart/docker.log 日志如下: // :: POST / ...
- c# 基本值类型及其默认值
//值类型 C# 类型 .NET Framework 类型 bool System.Boolean 4Byte 32bit布尔型变量 逻辑值,true或者false,默 ...
- 【SAP BO】【WEBI】【转】Webi实现动态选择度量
我们都知道Web Intelligence具有高级的分析功能,是一个非常灵活的报表工具.在这篇文章里,我会演示一个使用Webi实现动态选择度量对象的方案.首先解释一下什么是”动态选择度量”:例如我们有 ...
- Hangover[POJ1003]
Hangover Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 121079 Accepted: 59223 Descr ...
- Mishka and Divisors[CodeForces Round #365 Div.2]
http://codeforces.com/contest/703/problem/E 题意:给定一个最多个数的序列,从中选出最少个数的数字,使得他们的乘积是k的倍数,若有多种选择方式,输出选出数字和 ...