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).旋 ...
随机推荐
- vim 清空
插入模式 首先执行gg 跳至文件首行 然后执行dG就清空了整个文件 还有一种方法就要退出VIM,然后使用echo > file ,这样也能快速清空文件内容
- C#根据html生成PDF
使用iTextSharp 控件 iTextSharp包括几个dll. 主要iTextSharp版本包含:——itextsharp.dll:核心库——itextsharp.xtra.dll:额外的功能( ...
- WebSocket协议开发
一直以来,网络在很大程度上都是围绕着HTTP的请求/响应模式而构建的.客户端加载一个网页,然后直到用户点击下一页之前,什么都不会发生.在2005年左右,Ajax开始让网络变得更加动态了.但所有的HTT ...
- 利用K-means聚类分类,进行特征学习
这只是老师安排的一个实验,准备过程中遇到各种问题,现在贴出来供大家参考,是Andrew Ng参与的研究, 论文依据如下,第二篇是一篇相关的论文, Learning Feature Representa ...
- css3 -- 多列
1.指定分列: E{column-count:2:} --- 两列 E{ -moz-column-count:2: -webkit-column-count:2: } Firefox与webkit实现 ...
- 下载安全程序需谨慎 黑客盯上XP用户
中关村在线消息:微软在上周正式结束了对Windows XP的技术支持,而很多仍在使用Windows XP的用户会选择在网上自行下载第三方的安全工具.不过国外的安全机构Malwarebytes近日提醒, ...
- Mac 自带 apache
1.启动服务器 sudo apachectl start http://localhost 能访问就ok sudo apachectl stop sudo apachectl restart ht ...
- MongoDB 入门之基础 DDL
此文章主要记录部分主要的 MongoDB 的 DDL 操作. db 查看当前所在的数据库(默认 test) > db test > show dbs 查看当前数据库服务器上的数据库名字 ...
- 【原】iOS学习之SQLite和CoreData数据库的比较
1. SQLite数据库 sqlite数据库操作的基本流程是, 创建数据库, 再通过定义一些字段来定义表格结构, 可以利用sql语句向表格中插入记录, 删除记录, 修改记录, 表格之间也可以建立联系. ...
- Storm分布式实时流计算框架相关技术总结
Storm分布式实时流计算框架相关技术总结 Storm作为一个开源的分布式实时流计算框架,其内部实现使用了一些常用的技术,这里是对这些技术及其在Storm中作用的概括介绍.以此为基础,后续再深入了解S ...