小球動不了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Promise animation</title>
<style>
.ball{
width: 40px;
height: 40px;
border-radius: 20px;
}
.ball1{
background: red;
}
.ball2{
background: blue;
}
.ball3{
background: green;
}
</style>
<script src="./node_modules/bluebird/js/browser/bluebird.js"></script>?
</head>
<body>
<div class="ball ball1" style="margin-left: 0;"></div>
<div class="ball ball2" style="margin-left: 0;"></div>
<div class="ball ball3" style="margin-left: 0;"></div>
</body>
<script>
var ball1 = document.querySelector(".ball1");?
var ball2 = document.querySelector(".ball2");?
var ball3 = document.querySelector(".ball3");
var Promise = window.Promise;?
function promiseAnimate(ball, distance){
return new Promise(function(resolve, reject){
function _animate(){??
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft);
if(marginLeft === distance){
resolve()
}
else{
if(marginLeft < distance){
marginLeft ++;
}
else{
marginLeft --;
}
ball.style.marginLeft = marginLeft+"px";
_animate;
}
}, 13) //1秒60幀動畫比較流暢，即1幀16.7毫秒
}
_animate();
})
}
//執行動畫的代碼
promiseAnimate(ball1, 100)
.then(function(){
return promiseAnimate(ball2, 200)
})
.then(function(){
return promiseAnimate(ball3, 300)
})
.then(function(){
return promiseAnimate(ball3, 150)
})
.then(function(){
return promiseAnimate(ball2, 150)
})
.then(function(){
return promiseAnimate(ball1, 150)
})
</script>
</html>
2018-08-08
ball.style.marginLeft = marginLeft+"px";
的下面一行「_animate」函數沒有執行