requestAnimationFrame似乎无效

Question

我最近看了杰克·基巴尔德的讲话。他在讲话中举了一个例子

该框将直接移动到500px的位置。而不是从1000像素变为500像素。

杰克·奇巴尔德的解决方案被提出。使用两层嵌套的requestAnimationFrame

但是它似乎对我不起作用。为什么？

Answer 1

我试图复制您的代码。以下工作。是您所期望的吗？

只是为了确保我们没有遇到任何愚蠢的问题：DOM加载后您的JavaScript就会运行？

const box = document.getElementById("box");
box.addEventListener("click", ()=>{
  box.style.transform = 'translateX(100px)';
  box.style.transition = 'transform 1s ease-out';  
  requestAnimationFrame(()=>{
    requestAnimationFrame(()=>{
        box.style.transform = 'translateX(300px)';
    });
  });
});

#box {
  background-color: salmon;
  height: 100px;
  width: 100px
}

<div id="box">box</div>