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).旋 ...
随机推荐
- android MPAndroidChart饼图实现图例后加数字或文本(定制图例)
转载请注明:http://blog.csdn.net/ly20116/article/details/50905789 MPAndroidChart是一个非常优秀的开源图表库,MPAndroidCha ...
- JAVA Day4
循 环 所有循环的流程 声明循环变量-->判断循环条件-->执行循环操作-->更新循环变量 不断执2 ...
- Redis 的 5 个常见使用场景
2015-07-22 23:31:46 本文由 伯乐在线 - 刘晓鹏 翻译,黄利民 校稿.未经许可,禁止转载!英文出处:Joe Engel.欢迎加入翻译组. 在这篇文章中,我们将阐述 Redis 最常 ...
- C#开发微信公众平台-就这么简单(附Demo)(转)
原文:http://www.cnblogs.com/xishuai/p/3625859.html 写在前面 阅读目录: 服务号和订阅号 URL配置 创建菜单 查询.删除菜单 接受消息 发送消息(图文. ...
- 一个java集合使用bug
在使用java集合的时候有的时候集合是来自于一些第三方工具提供的从字符串或json 转出集合的对象有时是抽象类,这时的对象部分功能是未实现的,在使用相应操作的时侯 会引发bug. Exception ...
- MFC MSBDutyTable下载地址
点击此处跳转到下载地址 简明教程: 对于非制表人,只需要添加空余时间-新建,然后点星期和节数有课的那个按钮,勾选自己有课的周数.全部勾好后,生成空余时间表.然后查看自己的空余时间表,并导出,发给制表人 ...
- iOS KVO 学习笔记
//// //// main.m //// TestBasis //// //// Created by ficow on 16/1/14. //// Copyright © 2016年 ficow. ...
- Python基础10- 函数之内部函数与强制转换
#coding=utf-8 import mathimport osimport socket Python函数包括以下三类:内部函数.第三方函数和自定义函数内部函数包括:字符函数库.数学函数库.系统 ...
- Activiti工作流学习(二)流程实例、执行对象、任务
一.前言 前面说明了基本的流程部署.定义,启动流程实例等基本操作,下面我们继续来学习流程实例.执行对象.任务. 二.流程实例.执行对象说明 整个Activiti的生命周期经过了如下的几个步骤: 1.流 ...
- 关于使用rem单位,calc()进行自适应布局
关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...