javascript:使用transitionend和setTimeout来协调一个循环？

Question

我怎样才能更好地计时这个循环？我试图遍历DOM中的所有div，并将它们转换到5s以上，然后删除它们。我认为我没有正确地使用transitionend事件。我只想一次转换一个元素，删除它，然后继续循环。

let els = document.querySelectorAll('div');


els.forEach((x,i) => {
    setTimeout(() => {
       x.style.transform = 'translate(400%, 400%)';
       x.style.transition = 'all 5s ease-in';
       x.addEventListener('transitionend', () => {
         console.log("transition has ended");
         x.remove()
       });
    }, i * 400); 
})

Answer 1

由于转换持续5秒，所以将i乘以5000，而不是400：

​

let els = document.querySelectorAll('div');


els.forEach((x,i) => {
    setTimeout(() => {
       x.style.transform = 'translate(400%, 400%)';
       x.style.transition = 'all 5s ease-in';
       x.addEventListener('transitionend', () => {
         console.log("transition has ended");
         x.remove()
       });
    }, i * 5000); 
})

<div>foo</div>
<div>foo</div>
<div>foo</div>

​

一种更普遍的办法是，如果事先不知道过渡时间，就应等待承诺：

​

let els = document.querySelectorAll('div');

setTimeout(() => {
  (async () => {
    for (const x of els) {
      await new Promise((resolve) => {
         x.style.transition = 'all 5s ease-in';
         x.style.transform = 'translate(400%, 400%)';
         x.addEventListener('transitionend', () => {
           console.log("transition has ended");
           x.remove()
           resolve();
         });
      });
    }
  })();
});

<div>foo</div>
<div>foo</div>
<div>foo</div>

​

Answer 2

我不认为setTimeOut的使用有什么意义，这仅仅是为了启动转换吗？

在这种情况下，我更喜欢使用按钮！

​

let divs   = document.querySelectorAll('div')
  , btTest = document.querySelector('button')

const elmTransEnd = el => new Promise(rsvl =>
  {
  const endTrans=e=>{ el.removeEventListener('transitionend', endTrans);rsvl() }
  el.addEventListener('transitionend', endTrans);
  el.style.transition = 'all 3s ease-in';  
  el.style.transform = 'translateX(80%)';
  });
 
async function* stepGen(elArr) { yield* elArr; }

async function launchTransitions()
  {
  for await (let el of stepGen([...divs]))
    {
    await elmTransEnd(el);
    console.log('el', el.textContent, 'done')
    el.remove()
    }
  }
  
btTest.onclick = _ => 
  {
  btTest.disabled = true
  launchTransitions()
  }

<button>test</button>

<div>foo1</div>
<div>foo2</div>
<div>foo3</div>

​