move.js操作CSS3动画
时间:2020-03-27
本文章向大家介绍move.js操作CSS3动画,主要包括move.js操作CSS3动画使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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方法的时候的一个发现,有说的不对的地方希望大家指正一下~~谢谢。
原文地址:https://www.cnblogs.com/baimeishaoxia/p/12583817.html
- spring-data-mongodb mapreduce使用
- 项目中如何设计通用的评论模块
- java8 stream
- spring boot中自定义错误提示页面
- spring boot中删除Data MongoDB的_class
- 用aop加redis实现通用接口缓存
- spring boot 实现mysql读写分离
- spring boot集成druid连接池
- spring boot整合dubbox进行服务拆分
- Spring Cloud中如何保证各个微服务之间调用的安全性
- Spring Boot Actuator监控页面报错解决
- Spring Cloud中如何优雅的使用Feign调用接口
- Spring Cloud Eureka 集群高可用
- Spring Cloud Eureka 增加权限认证
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【学不动了系列】之 Deno 入门 什么是Deno安装DenoDeno运行时(Runtime)Deno标准库第三方模块
- SAUI-瀑布流改版(grid)
- 深入分析 Spring 基于注解的 AOP 实现原理
- 一连问了好几个大佬,竟然都不知道Redis为什么默认16个数据库?
- 03 Spring Boot 整合Druid
- 关于字符串切割空格
- CSS浮动知识
- 你敢信?四行Python代码就能知道你那的天气!
- Ribbon核心组件IRule及负载均衡算法
- CSS标签显示模式及单行文本
- CSS复合选择器
- CSS重要的盒子模型
- CSS3圆角边框和盒子阴影
- 修改Mirages主题底部默认字体大小
- CSS字体字段样式