如下是我写的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>
如上源码动画轨迹：
向右移动---向下移动---变高---向上移动--向下移动---向上移动 （移动时间可自己控制）
原文：https://www.cnblogs.com/xiaohuizhang/p/11721364.html