Here is what I wrote demo source code:
You can be copied directly with the browser to open to see the effect oh;
<!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 / B + T D *;
obj.style [attr] = V + 'PX' ;
IF (T === D) {
RES ()
}
}, 20 is )
})
}
// with Promise after the package may increase infinitely trajectory animation, concise code
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>
As the source animation track:
--- --- rightward moved downwardly moved upwardly increased --- - --- moved upward downward movement (movement time can own control)
