Asynchrones Verfahren Verkettung

Question

Ich versuche, eine Verkettung der gleichen asynchronous Methode zu erreichen. Grundsätzlich möchte ich einfach animation.animate({}).animate({}) anrufen. Die zweite animierte Methode muss aufgerufen werden, sobald die erste abgeschlossen ist.

Hier ist, was ich getan habe, ich denke, es ist in der Nähe, aber ich kann immer noch nicht finden, wie es funktioniert.

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({}) 

Answer 1

Sie müssen this.queue mit einem neuen Versprechen neu zuzuordnen erhalten Sie von 'this.queue.then'

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>