【前端开发】】ES6属性promise封装js动画
如下是我写的demo源码：
可以直接复制用浏览器打开看到效果哦；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//利用es6 new Promise
function movePromise(obj,attr,target,duration){
return new Promise((res,rej)=>{
var b = parseInt(getComputedStyle(obj)[attr]);
var c= target - b;
var d = duration;
var temp = new Date().getTime();
var timer = setInterval(function(){
var t = new Date().getTime()-temp;
if(t>=d){
clearInterval(timer);
t= d;
}
var v = c/d*t + b;
obj.style[attr] = v+'px';
if(t===d){
res()
}
},20)
})
}
//用Promise封装后可以无限加动画运动轨迹,代码简洁
movePromise(box,"width",200,500)
.then(()=>movePromise(box,"left",300,100))
.then(()=>movePromise(box,"top",300,100))
.then(()=>movePromise(box,"height",300,100))
.then(()=>movePromise(box,"top",100,300))
.then(()=>movePromise(box,"top",200,300))
.then(()=>movePromise(box,"top",150,300))
</script>
</body>
</html>
如上源码动画轨迹：
向右移动---向下移动---变高---向上移动--向下移动---向上移动 （移动时间可自己控制）
【前端开发】】ES6属性promise封装js动画的更多相关文章
- 微信小程序ES6方法Promise封装接口
为何要封装接口? 有小程序开发的经验者,相信对微信API Request很熟悉了.对接接口时,有大部分的开发者都是直接调用request方法,去请求后台接口并渲染数据.诚然,直接使用api发起请求对接 ...
- openresty 前端开发轻量级MVC框架封装一（控制器篇）
通过前面几章,我们已经掌握了一些基本的开发知识,但是代码结构比较简单,缺乏统一的标准,模块化,也缺乏统一的异常处理,这一章我们主要来学习如何封装一个轻量级的MVC框架,规范以及简化开发,并且提供类似p ...
- 前端开发--面试题整理（JS篇）
1.截取字符串abcdace的acealert('abcdace'.substring(4)); 2.规避javascript多人开发函数重名问题命名空间封闭空间js模块化mvc(数据层.表现层.控制 ...
- web前端开发必懂之一：JS继承和继承基础总结
首先,推荐一篇博客豪情的博客JS提高: http://www.cnblogs.com/jikey/p/3604459.html ,里面的链接全是精华, 一般人我不告诉他; 我们会先从JS的基本的设计模 ...
- openresty 前端开发轻量级MVC框架封装二（渲染篇）
这一章主要介绍怎么使用模板,进行后端渲染,主要用到了lua-resty-template这个库,直接下载下来,放到lualib里面就行了,推荐第三方库,已经框架都放到lualib目录里面,lua目录放 ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- 前端开发--css属性书写顺序
css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...
- 前端开发学习笔记 - 1. Node.JS安装笔记
Node.JS安装笔记 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an ...
- 分享一些前端开发中最常用的JS代码片段~ 干货~
http://www.w3cfuns.com/notes/25068/1d0d350a974d879e63f1115cf80a3288.html
随机推荐
- SQL语句精妙集合
1一.基础 2 31.说明:创建数据库 4Create DATABASE database-name 5 62.说明:删除数据库 7drop database dbname 8 93. ...
- Spring Cloud 如何使用Eureka注册服务 4.2.2
要使用Eureka实现服务发现,需要项目中包含Eureka的服务端发现组件以及客户端发现组件. 搭建Maven父工程 创建一个Maven父工程xcservice-springcloud,并在工程的po ...
- Nginx限制ip访问
首先建立下面的配置文件放在nginx的conf目录下面,命名为blocksip.conf: 加入以下代码: #屏蔽soso蜘蛛IP deny 113.108.12.154; #此为搜搜蜘蛛IP den ...
- git 打tag（版本）、推送代码
服务端:192.168.0.96 gitlab 客户端:192.168.0.97 git 服务端gitlab安装请参照: https://www.cnblogs.com/effortsing/p/10 ...
- 【linux基础-err】 tar命令-stdin: not in gzip format
problem gzip: stdin: not in gzip format tar: Error is not recoverable: exiting now 解决方法 最后发现下载的压缩文件有 ...
- Java分布式：分布式事务
Java分布式:分布式事务 分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上.简单的说,就是一次大的操作由不同的小操作组成,这 ...
- C# .NET 杀进程
procName 是进程名,不带.exe . private bool IsAppKill(String procName) { try { ; System.Diagnostics.Process[ ...
- 最新 企叮咚java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 企叮咚等10家互联网公司的校招Offer,因为某些自身原因最终选择了 企叮咚.6.7月主要是做系统复习.项目复盘.Leet ...
- 无聊的活动/缘生意转（2018 Nova OJ新年欢乐赛B题）解题报告
题目2(下面的太抓 我重新写了个背景 其他都一样) 无聊的活动 JLZ老师不情愿的参加了古风社一年一度的活动,他实在不觉得一群学生跳舞有什么好看,更不明白坐在身后的学生为什么这么兴奋(看小姐姐),于是 ...
- eclipse设置格式化tab为4个空格和idea一样