没有用node环境 直接用的js 只有第一个小球动了 好像是 。then没有执行 这个是必须node环境才可以吗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>气球动画</title>
<style>
.ball { width:40px; height: 40px; margin:5px; border-radius: 20px; }
.ball1 { background: red; }
.ball2 { background: yellow; }
.ball3 { background: green; }
</style>
<script src="bluebird.min.js"></script>
</head>
<body>
<div class="ball ball1"></div>
<div class="ball ball2"></div>
<div class="ball ball3"></div>
<script>
let ball1 = document.querySelector('.ball1');
let ball2 = document.querySelector('.ball2');
let ball3 = document.querySelector('.ball3');
function _getComputedStyle(element, prop) {
var computedStyle;
if (typeof window.getComputedStyle === 'function') { //normal browsers
computedStyle = window.getComputedStyle(element);
} else if (typeof document.currentStyle !== undefined) { //shitty browsers
computedStyle = element.currentStyle;
} else {
computedStyle = element.style;
}
if (prop) {
return computedStyle[prop];
} else {
return computedStyle;
}
}
// function animate(ball,distance,cb){
// setTimeout(function(){
// if(!ball.style.marginLeft){
// ball.style.marginLeft = _getComputedStyle(ball,'marginLeft')
// }
// let marginLeft = parseInt(ball.style.marginLeft,10)
// if(marginLeft === distance){
// cb && cb()
// }else{
// if(marginLeft < distance){
// marginLeft++
// }else{
// marginLeft--
// }
// ball.style.marginLeft = marginLeft + 'px'
// animate(ball,distance,cb)
// }
// },13);
// }
// animate(ball1,100,function(){
// animate(ball2,200,function(){
// animate(ball3,300,function(){
// animate(ball3,150,function(){
// animate(ball2,150,function(){
// animate(ball1,150,function(){
// console.log('动了')
// })
// })
// })
// })
// })
// })
var Promise = window.Promise
function promiseAnimate(ball,distance){
return new Promise(function(resolve,reject){
function _animate(){
setTimeout(function(){
if(!ball.style.marginLeft){
ball.style.marginLeft = _getComputedStyle(ball,'marginLeft')
}
let marginLeft = parseInt(ball.style.marginLeft,10)
if(marginLeft === distance){
resolve
}else{
if(marginLeft < distance){
marginLeft++
}else{
marginLeft--
}
ball.style.marginLeft = marginLeft + 'px'
_animate()
}
},13);
}
_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>
</body>
</html>
