javascript - 在暂时禁用 CSS 转换的情况下更改 JavaScript 中的 HTML 元素样式无法可靠地运行

Question

这个问题已经有答案了:

How can I force WebKit to redraw/repaint to propagate style changes? (33 个回答)

已关闭 5 年前。

目前，我正在为一个网站制作一个动画，其中涉及两个元素，它们的位置在一段时间内发生变化，并且通常会重置为初始位置。一次只能看到一个元素，一切都应该尽可能顺利地运行。

在你问之前，纯 CSS 解决方案是不可能的，因为它是动态生成的并且必须同步。为了解决这个问题，我将使用一个非常简化的版本，它仅由一个向右移动的框组成。除非为了简单起见，对该问题的其余部分明确说明，否则我将仅引用后一个示例。

无论如何，移动是由设置的 CSS transition 属性来处理的，以便浏览器可以为此完成繁重的工作。然后必须取消此转换，以便立即重置元素的位置。这样做的明显方法是这样做，然后在需要再次移动时重新应用转换，这也是立即的。但是，这不起作用。不完全的。我会解释一下。

看看这个问题末尾或链接的 JSFiddle 中的 JavaScript，您可以看到这就是我正在做的事情，但是 setTimeout 在两者之间添加了 25 毫秒的延迟。这样做的原因是(最好你自己尝试一下)如果没有延迟(这就是我想要的)或延迟很短，该元素将间歇性或持续保持在原位，这不是期望的效果。延迟越高，它工作的可能性就越大，尽管在我的实际动画中这会导致轻微的抖动，因为动画分两部分工作并且没有设计为有延迟。

这看起来确实可能是浏览器错误，但我已经在 Chrome、Firefox 52 和当前版本的 Firefox 上进行了测试，结果都相似。我不知道从这里该去哪里，因为我无法找到任何地方报告的此问题或任何解决方案/解决方法。如果有人能找到一种方法让它按预期可靠地工作，我们将不胜感激。 :)

---

Here is the JSFiddle page with an example of what I mean.

标记和代码也粘贴在这里:

var box = document.getElementById("box");
//Reduce this value or set it to 0 (I
//want rid of the timeout altogether)
//and it will only function correctly
//intermittently.
var delay = 25;

setInterval(function() {
  box.style.transition = "none";
  box.style.left = "1em";

  setTimeout(function() {
    box.style.transition = "1s linear";
    box.style.left = "11em";
  }, delay);
}, 1000);

#box {
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;
}

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

Answer 1

重置后设置新的转换之前强制 DOM 重新计算自身。例如，这可以通过读取框的偏移量来实现，如下所示:

var box = document.getElementById("box");

setInterval(function(){
      box.style.transition = "none";
      box.style.left = "1em";
      let x = box.offsetLeft; // Reading a positioning value forces DOM to recalculate all the positions after changes
      box.style.transition = "1s linear";
      box.style.left = "11em";  
    }, 1000);

body {
  background-color: rgba(0,0,0,0);
}

#box {
  width: 5em;
  height: 5em;
  background-color: cyan;
  position: absolute;
  top: 1em;
  left: 1em;
}

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

See also a working demo at jsFiddle .

通常，当您设置 DOM 属性时，在脚本完成之前，DOM 不会更新。然后重新计算并渲染 DOM。但是，如果您在更改 DOM 属性后读取它，它会立即强制重新计算。

如果没有超时(和属性读取)，style.left 值首先更改为 1em，然后立即更改为 11em。脚本完成后会发生转换，并看到最后设置的值 (11em)。但是，如果您读取更改之间的位置值，则转换将具有新的值。