为什么省略 0ms sleep 会破坏我的 css 转换？-PHP中文网问答

我正在尝试实现 FLIP 动画，看看我是否理解正确。

在这个代码笔中（请原谅糟糕的代码，我只是在乱搞），如果我注释掉睡眠，平滑过渡将不再有效。 div 突然改变位置。这很奇怪，因为睡眠时间为 0ms。

import React, { useRef, useState } from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";

let first = {}
let second =  {}

const sleep = async (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const App = () => {
  const [start, setStart] = useState(true);
  
  const boxRefCb = async el => {
    if (!el) return;

    el.style.transition = "";
    const x = parseInt(el?.getBoundingClientRect().x, 10);
    const y = parseInt(el?.getBoundingClientRect().y, 10);
    first = { x: second.x, y: second.y };
    second = { x, y };
    
    const dx = first.x - second.x;
    const dy = first.y - second.y;

    const transStr = `translate(${dx}px, ${dy}px)`;
    el.style.transform = transStr;
    await sleep(0); // comment me out
    el.style.transition = "transform .5s";
    el.style.transform = "";
  }
  
  return (
    <>
    
      
      
    
      
    
    
  );
}

ReactDOM.render(,
document.getElementById("root"))

我怀疑这是一些我不理解的事件循环魔法。有人可以帮我解释一下吗？