将内联样式添加到元素后，我如何知道何时可以更改它以使过渡起作用？

Question

正如您在下面的代码中看到的那样。如果您更改样式，然后立即再次更改，则不会有过渡。但是，如果您稍等片刻，它就会起作用。我想知道是否有任何可以监控的东西，以了解您何时可以再次更改样式，以免绕过过渡。

let one = document.getElementById('one');

let two = document.getElementById('two');

one.style.left = '100px';

one.style.left = 0;

two.style.left = '100px'

setTimeout(()=> two.style.left = 0, 100);

div {

  position: absolute;

  width: 100px;

  height: 100px;

  border: solid;

  transition: left 1s;

}

#two {

  top: 150px;

}

<div id='one'></div>

<div id='two'></div>

编辑：这似乎是使用 no-delay 的简单情况setTimeout，确实适用于我的示例代码。但是，在我的实际代码中不起作用。我不确定发生了什么。我无法举出一个不起作用的简单示例，但我猜这与页面上有更多内容有关。