Javascript 从左到右，然后从右到左设置div动画

我正在看这个演讲：

演讲者讨论了JS任务和DOM呈现。他举了以下例子：

任务
* {
框大小：边框框；
}
.盒子{
宽度：50px；
高度：50px；
背景颜色：粉红色；
}
var-box=document.querySelector（“.box”）；
box.addEventListener（“单击”，（）=>{
box.style.transform=“translateX（500px）”；
box.style.transition=“transform 1s ease in-out”；
box.style.transform=“translateX（250px）”；
});

在第二条语句中使用此one setTimeout，否则这两条语句都会一个接一个地执行得非常快，因此无法获得所需的实际值

任务
* {
框大小：边框框；
}
.盒子{
宽度：50px；
高度：50px；
背景颜色：粉红色；
}
var-box=document.querySelector（“.box”）；
box.addEventListener（“单击”，（）=>{
box.style.transform=“translateX（500px）”；
box.style.transition=“transform 1s ease in-out”；
setTimeout（函数（）{
box.style.transform=“translateX（250px）”；
},1000);
});

视频中有一个错误

这是正确的代码：

box.addEventListener("click", () => {
  box.style.transform = "translateX(500px)";

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      box.style.transition = "transform 1s ease-in-out";
      box.style.transform = "translateX(250px)";
    });
  });
});

---

演讲者说要避免UI操作的setTimeout。这些transform语句之间需要一些延迟，所以两个语句都会一个接一个地执行。两者都需要应用一些动画，以便在一段时间后恢复。如果您感兴趣，请观看演讲：。我认为在我们的例子中，

setTimeout（）

是没有必要的。好的，让我看看是的。我想出来了。我会补充答案。