我正在尝试实现相同asynchronous
方法的链接。基本上我想要做的只是致电animation.animate({}).animate({})
。第一个动画方法需要在第一个动画方法完成后调用。
这就是我所做的,我认为它很接近,但我仍然无法找到如何使它发挥作用。
class Animation {
constructor() {
this.queue = new Promise((resolve,reject)=> {resolve()})
}
animate(params) {
this.queue.then(() => {
return this.cssAnimate(params);
})
return this;
}
cssAnimate(params) {
return new Promise((resolve,reject) => {
//do stuff to animate
params.el.addEventListener('transitionend', () => {resolve()})
})
}
}
let animation = new Animation();
animation
.animate({})
.animate({})
答案 0 :(得分:0)
您需要使用'this.queue.then'获得的新承诺重新分配this.queue
class Animation {
constructor() {
this.queue = Promise.resolve()
}
animate(params) {
this.queue = this.queue.then(() => this.cssAnimate(params))
return this;
}
cssAnimate(params) {
const {el, clz} = params
return new Promise(resolve => {
el.addEventListener('transitionend', resolve)
el.classList.toggle(clz)
})
}
}
document.querySelector('#play').addEventListener('click', () => {
let animation = new Animation();
const el = document.querySelector('.box')
animation
.animate({
el,
clz: 'left'
})
.animate({
el,
clz: 'left'
})
})
.box {
background-color: pink;
width: 100px;
height: 100px;
margin-left: 0;
transition: all 3s linear;
}
.left {
margin-left: 200px;
}
<div class="box"></div>
<button id="play">Play</div>