requestAnimationFrame 和 getComputedStyle 不能按预期工作（在 Jake Archibalds “循环中”演讲之后）

Question

我正在观看并关注 Jake Archibald 关于事件循环的演讲。 在某些时候，他尝试移动一个框，首先移动到 1000 像素，然后回到 500 像素。 您也可以在此处观看视频：

Jake Archibald：在循环中 - JSConf.Asia (22:10)

他提供了两种解决方案，但我无法让它们中的任何一种为我工作，即使（我认为）我做的完全一样。 第一个解决方案是这样的：

button.addEventListener("click", () => {
box.style.transform = "translateX(1000px)";
box.style.transition = "transform 1s ease-in-out";

requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    box.style.transform = "translateX(500px)";
  });
 });
});

正如他所说，第二个“hacky”是这样的：

button.addEventListener("click", () => {
   box.style.transform = "translateX(1000px)";
   box.style.transition = "transform 1s ease-in-out";
   getComputedStyle(box).transform;
   box.style.transform = "translateX(500px)";

});

在这两种情况下，盒子都会移动到 500px，而它应该先移动到 1000px，然后再回到 500px。

我错过了什么吗？ 难道我做错了什么？ 还是自 2018 年以来情况发生了如此大的变化，以至于该解决方案不再起作用？

PS 我在 Ubuntu 22.04 上使用 Chrome 版本 102.0.5005.61。

Answer 1

视频显示的内容在这里是错误的。

对于这个解释，我将使用“hacky”方式，因为它似乎更容易理解，因为它是同步的，因此我们不必怀疑回流何时发生。 （如果你知道你在做什么，它实际上并不比任何异步方式更hacky）。

为了使转换生效，我们需要一个初始值、一个目的地和一个标志，告诉我们可以转换给定的属性更改。
当这个标志被提升时，任何可以转换的值的变化都将被用作目标，当前值将被用作我们转换的初始值。

在示例中，在我们单击按钮之前，我们只有一个初始值（ none ，即translateX(0px) ）。

button.addEventListener("click", () => {

然后我们设置新的transform和transition值。

   box.style.transform = "translateX(1000px)";
   box.style.transition = "transform 1s ease-in-out";

此时，CSS 布局还没有更新，它不知道我们确实改变了任何东西。
强制回流的下一行将解决这个问题。

   getComputedStyle(box).transform;

在这里，CSS 引擎看到它有转换的transform标志，并且transform值已经改变。 因此，它启动了从当前值 ( 0px ) 到新值 ( 1000px ) 的转换。
但即使在它开始渲染过渡之前，

   box.style.transform = "translateX(500px)";

将目标更改为500px 。 因此，它将更新过渡，从此时的任何位置（仍为0px ）到新的目的地（ 500px ）。

异步版本显然也是如此，除了当我们将新值设置为500px时，我们的元素已经移动了一点（在 60Hz 显示器上移动了约 17px，而它应该只移动了一半）。
这个值不是很明显，因为它只有一帧，500px/s 和 1000px/s 之间的速度差异在单帧中不是很明显，但是如果你有更大的差异，你可以看到它更好：

 const box = document.querySelector(".box"); const button = document.querySelector(".button"); button.addEventListener("click", () => { // Forcing a huge value here will make the transition // to start from much farther on the right // because it will travel a quite big distance on the first frame // and then start the new transition from the current position // Depending on your monitor's refresh rate you may even see it // coming from the right. box.style.transform = "translateX(500000px)"; box.style.transition = "transform 1s ease-in-out"; requestAnimationFrame(() => { requestAnimationFrame(() => { box.style.transform = "translateX(500px)"; }); }); }); // So we can try multiple times document.querySelector(".reset").onclick = (evt) => { box.style.transform = "none"; box.style.transition = "none"; box.style.offsetWidth; }

 .box { width: 50px; height: 50px; border: 1px solid; }

 <button class="button">click me</button> <button class="reset">reset</button> <div class="box"></div>

因此，我将再次在这里扮演“hacky”倡导者。 使用同步方式，您可以控制发生的事情。 只是要非常小心，不要在强制回流之后再污染 CSS 布局，你会没事的，浏览器不会在渲染步骤中重新计算它。

---

据我所知，这一直是预期的和实际的行为，我非常怀疑自这次谈话以来这已经发生了变化，你甚至可以在视频下检索到 2019 年的一些评论，这些评论谈到这不像视频中解释的那样工作。

要获得预期的行为，您需要在计算新初始位置的回流之后设置转换以及目标值的设置。

 const box = document.querySelector(".box"); const button = document.querySelector("button"); button.addEventListener("click", () => { box.style.transform = "translateX(1000px)"; getComputedStyle(box).transform; box.style.transform = "translateX(500px)"; box.style.transition = "transform 1s ease-in-out"; }); // So we can try multiple times document.querySelector(".reset").onclick = (evt) => { box.style.transform = "none"; box.style.transition = "none"; box.style.offsetWidth; }

 .box { width: 50px; height: 50px; border: 1px solid; }

 <button class="button">click me</button> <button class="reset">reset</button> <div class="box"></div>

或者

 const box = document.querySelector(".box"); const button = document.querySelector("button"); button.addEventListener("click", () => { box.style.transform = "translateX(1000px)"; requestAnimationFrame(() => { requestAnimationFrame(() => { box.style.transform = "translateX(500px)"; box.style.transition = "transform 1s ease-in-out"; }); }); }); // So we can try multiple times document.querySelector(".reset").onclick = (evt) => { box.style.transform = "none"; box.style.transition = "none"; box.style.offsetWidth; }

 .box { width: 50px; height: 50px; border: 1px solid; }

 <button class="button">click me</button> <button class="reset">reset</button> <div class="box"></div>