OSX 上的 Chrome：CSS 转换立即应用于 div 的第二个克隆

Question

我想执行以下操作：创建一个 div (#test)，然后多次克隆该 div，每次克隆时都通过 javascript 向其添加 css 转换。第一次一切正常，但如果我第二次尝试克隆并应用 css 转换，则转换不起作用。

在此示例 ( https://jsfiddle.net/9uL1qt6n/13/ ) 中，红色方块按预期移动，但绿色方块没有移动，并立即出现在过渡结束时。

这是我正在使用的 javascript 代码：

function move(color){

  let clone=document.getElementById("test").cloneNode(true);

  clone.id=color;

  clone.style.display="block";

  clone.style.backgroundColor=color;

  document.getElementById("main").prepend(clone);

  setTimeout(function(){

      clone.style.left="500px";

  },0)

}

setTimeout(function(){move("red")},500);

setTimeout(function(){move("green")},750);

我希望红色方块以 left=0px 开始并在 .5s 处向右移动，然后是一个绿色方块以 left=0px 在 .75s 处开始并向右移动。我看到的是一个以 left=0px 在 .5s 开始并向右移动的红色方块，然后是一个在 .75s 以 left=500px 开始并且不移动的绿色方块。

编辑：这似乎可以在 Mac 上的 Safari 以及 iOS 上的 Safari 和 Chrome 上正常工作。以上建议的行为仅出现在 Mac 上的 Chrome 上。

Answer 1

这是因为setTimeout(/**/, 0)不保证回调将在后续帧上执行。这可能（取决于浏览器实现和计算机速度）导致将样式应用于与插入到 DOM 中的节点相同的框架。理论上，您应该使用requestAnimationFrameinstead，这正是针对此类情况的。但是，在您链接的小提琴中，只有当我将requestAnimationFrame难以察觉但仍然不受欢迎的加倍时它才有效......如果它是 JSFiddle 的侥幸或什么......function move(color){  let clone=document.getElementById("test").cloneNode(true);  clone.id=color;  clone.style.display="block";  clone.style.backgroundColor=color;  document.getElementById("main").prepend(clone);  requestAnimationFrame(() => {    requestAnimationFrame(() => {        clone.style.left="500px";    })  })}这是一个片段：function move(color) {  let clone = document.getElementById("test").cloneNode(true);  clone.id = color;  clone.style.display = "block";  clone.style.backgroundColor = color;  document.getElementById("main").prepend(clone);  requestAnimationFrame(() => {    requestAnimationFrame(() => {      clone.style.left = "500px";    })  })}setTimeout(() => move("red"), 500);setTimeout(() => move("green"), 750);#main {  display: block;  width: 100vw;  height: 100vh;  background-color: blue;}.test {  position: absolute;  display: none;  width: 100px;  height: 100px;  background-color: red;  transition: left 1s ease;  transform: scale(1);  left: 0px;}<div id="main"></div><div id="test" class="test"></div>