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 自定义title 之Action Bar
Android 自定义title 之Action Bar 2014-06-29 飞鹰飞龙... 摘自 博客园 阅 10519 转 25 转藏到我的图书馆 微信分享: Action Ba ...
- python数学运算的类型转换
类型转换 Rational类实现了有理数运算,但是,如果要把结果转为 int 或 float 怎么办? 考察整数和浮点数的转换: >>> int(12.34) 12 >> ...
- jsp遍历、循环
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 1. <% Te ...
- poj1328 贪心
http://http://poj.org/problem?id=1328 神TM贪心. 不懂请自行搜博客. AC代码: #include<cstdio> #include<algo ...
- no-jquery 02 DOM
DOM Manipulation Creating Elements // IE 5.5+ document.createElement('div'); Inserting Elements Befo ...
- fzu月赛 2203 单纵大法好 二分
Accept: 8 Submit: 18Time Limit: 5000 mSec Memory Limit : 65536 KB Problem Description 人在做,天在看 ...
- 在字符界面tty1~tty6中使用鼠标,并用其复制粘贴
1. 安装 无意间看到gpm这个服务可以让你在tty1~tty6 环境中使用鼠标. 先用 rpm -qa gpm 查看是否已经安装此服务,如果提示以安装,则可以直接开启: 否则就要通过 yum ins ...
- shinydashboard包---为shiny提供BI框架
1.安装 install.packages("shinydashboard") 2.基础知识 仪表盘有三个部分:标题.侧边栏,身体.下面是最最小的仪表面板页面的UI: ## ui. ...
- js jQuery笔记
jQuery 1.几种获取子元素的方法及区别 children方法获得的仅仅是元素一下级的子元素,即:immediate children. find方法获得所有下级元素,即:descendants ...
- BZOJ 1412 & 最小割
什么时候ZJ省选再现一次这么良心的题吧... 题意: 在一个染色的格子画分割线,使其不想连,求最少的线段 SOL: 裸裸的最小割.题目要求两种颜色不想连,我们把他分到两个集合,也就是把所有相连的边切断 ...