move.js是一款简单的支持CSS3动画的JavaScript库,对于对CSS3的操作不是很熟悉的人来说,使用move.js提供的方法操作CSS3动画更简单方便。

要想使用move.js提供的方法,首先应在我们的HTML页面中引入move.js:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>使用move.js操作CSS3动画</title><script type="text/javascript" src="move.js"></script><!--css样式--><style type="text/css"></style>
</head>
<body><script type="text/javascript" src="move.js"></script><script type="text/javascript">//javascript</script>
</body>
</html>

注意move.js的位置应该在body中,并且紧放在JavaScript的script标签的上一行,放在其他地方将会出错。
move.js的下载地址。

move.js的方法

.set(prop, val):用于设置元素的css属性,.set(属性, 属性值).
.add(prop, val):用来增加已经设置的属性值,必须是数值型值才可以增加。.set(属性, 属性值增量).
.sub(prop, val):add的逆过程,属性值减去将它提供的值.
.rotate(deg):按提供的角度旋转元素,.rotate(角度).
.duration(n):用于设置动画的播放时间.
.delay(n):提供一个时间的数值作为动画的延时.
.translate(x[, y]):用于修改元素的默认位置,提供一个参数时作为x坐标,提供第二个参数时第二个参数作为y坐标.
.x():用于调整元素的x坐标.
.y():用于调整元素的y坐标.
.skew(xDeg, yDeg):用于调整一个相对于x和y轴的角度.
.scale(x, y):用于放大或压缩元素的大小.
.ease(fn):ease函数指定CSS3过渡的行为。ease 函数有 in、out、in-out、snap、cubic-bezeir等.
.then():用于分割动画为两个集合,并按顺序执行.
.end():用于move.js代码片段的结束,标识动画的结束.

pop方法

pop方法用在move.js方法结束之前,及.end()方法之前,对于与then方法。如:

move('#square').x(500).y(200).ease('in-out').then().x(-500).then().y(-200).duration('2s').delay('.5s').rotate(180).pop().pop().end();   

这个例子中,square元素会先移动到坐标为(500,200)的位置,然后左移500px,然后再以2s的时间以180°旋转的方式向上移动200px,即回到最初的位置。但是当我们去掉其中一个.pop()方法的时候,会发现square元素不会移动到(500,200)的位置,而是移动到(0,200)的位置,即原位置正下方200px的地方,证明这段代码没有执行第二个then方法以上的代码,当我们把代码中的两个pop()都去掉的时候,square元素只会在原地以2s的时间旋转180°,证明代码中没有执行坐标变化的操作,这是因为pop方法是对应then方法的操作,如果我们想要看到then方法里面每一个方法执行,就需要在使用end前用到和then对应的pop方法,不然动画会忽略then的具体过程,直接得到结果。
move.js中pop()方法的函数为:

Move.prototype.pop = function(){return this.parent;
};

这是我在使用pop方法的时候的一个发现,有说的不对的地方希望大家指正一下~~谢谢。

move.js操作CSS3动画相关推荐

  1. 两个夜晚天空月亮动画背景js特效CSS3动画背景

    下载地址两个夜晚天空月亮动画背景特效因为是css3代码实现的,所以在老的浏览器上没效果 dd:

  2. CSS3,JS制作网页动画(时空穿梭,魔方,坠落星星,全屏樱花特效)

    目录 1.整体效果三个页面 2.P1时空穿梭 3.P2主页 4.P3樱花 1.整体效果三个页面 初衷是做一个祝福生日的模板,从第一张到最后一张是三个页面点击跳转依次显示,用gif图制作一些动画效果还是 ...

  3. svg配合css3动画_与Sarah Drasner一起使用CSS,JS和SVG进行动画处理,并避免倦怠

    svg配合css3动画 In this episode of the Versioning Show, Tim and David are joined by Sarah Drasner, a tea ...

  4. css3 动画 vs js 动画

    之前被问到过,css3 动画与 js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的.先来看看二者实现动画的原理吧. ...

  5. html实现类似app的欢迎页,css3动画代替js脚本实现欢迎页面动画

    1.使用脚本操作dom元素 在页面加载时,使用js控制dom的animationsetTimeout(function() { $('.welcome').fadeOut(1000) }, 5000) ...

  6. js动画与css3动画的区别

    欢迎学习交流!!! 持续更新中- 文章目录 JS动画(逐帧动画) css3(补间动画) 总结 JS动画(逐帧动画) 首先,在js动画是逐帧动画,是在时间帧上逐帧绘制帧内容,由于是一帧一帧的话,所以其可 ...

  7. 开发工具与关键技术: 使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换

    开发工具与关键技术: HTML CSS3 JQUERY JS 作者:冉启东 撰写时间:2019年1月18日 1.使用HTML制作Contextual variations各种颜色类型的徽章代码如下: ...

  8. python 动画场景_vue页面引入three.js实现3d动画场景操作

    vue中安装Three.js 近来无聊顺便研究一些关于3D图形化库.three.js是JavaScript编写的WebGL第三方库.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它通过 ...

  9. wow.min.js 支持css3多种动画的效果!

    下载地址:http://www.bootcdn.cn/wow/ 今天发现一个非常有趣的js,wow.min.js,Wow.js 允许用户滚动页面的时候展示 CSS 动画.默认的,用户可以使用它来出发 ...

最新文章

  1. 【BZOJ】1105: [POI2007]石头花园SKA
  2. java util logging_Java 日志系列篇一 原生 Java.util.logging
  3. php包含文件时显示空白页,php中出现空白页的原因及解决方法汇总_php技巧
  4. .NET跨平台实践:再谈用C#开发Linux守护进程 — 完整篇
  5. 数据库杂谈(五)——关系数据库语言
  6. Android将ScrollView移动到最底部
  7. [设计模式-行为型]策略模式(Strategy)
  8. 安徽新华学院计算机设计大赛,第十届中国大学生计算机设计大赛在安徽新华学院开幕...
  9. jquery中的css函数css(name)、css(key,value)、css(properties)、css(key,fn)
  10. Debugging a Plug-in
  11. 淘宝店铺装修全屏海报代码怎么用的设置方法
  12. ai人工智能_人工智能能否赢得奥运
  13. linux定时任务文件修改,linux 定时任务
  14. CVPR 2016目标检测
  15. 在职场:每个人,都应该学会使用项目管理工具Tracup
  16. 【CSDN年度之“战”征文】机器学习该怎么学?
  17. 学神、学霸的学生,靠的不是1%的天赋和智商,更不是努力,而是它
  18. Excel导入数据(图片处理)
  19. 【CAD】多段线的合并与闭合的操作与测试
  20. 物联网无线技术具体是怎么分类的,主要的应用场景是什么?

热门文章

  1. Mac系统安装Windows系统
  2. vb设置excel 字体 加粗 微软雅黑_Python操作Excel的Xlwings教程(六)
  3. pycharm 安装PYQ5以及no Qt platform plugin could be initialized的问题
  4. activemq 重启后java程序_ActiveMQ持久化机制代码实例
  5. 雷电三接口有什么用_「滕·Gallery」我是如何用奥睿科雷电三硬盘盒来弥补之前的失误的? | 数字尾巴 分享美好数字生活...
  6. android 是什么编码格式,在Android的JPG图像编码和解码
  7. linux防火墙桌面关闭端口,Linux关闭防火墙,开放端口
  8. torch使用cudnn7
  9. pytorch ResNet结构代码实现
  10. 植物病害鉴定真的需要深度CNN吗?