javascript - 重新排序键控反应元素使 css 过渡到故障

Question

我有一个包含 2 个绝对位置元素的数组，它们是通过topCSS 属性布局的。top此外，还有一个与键挂钩的 CSS 过渡。当我交换元素位置时，一些元素（虽然键没有改变），html 元素被重新创建，因此 CSS 转换不会发生。

import { useEffect, useState } from "react";
import "./styles.css";

const Square = ({ backgroundColor, index }) => {
  return (
    <div className="square" style={{ backgroundColor, top: index * 100 }} />
  );
};

export default function App() {
  const [arr, setArr] = useState(["blue", "red"]);
  useEffect(() => {
    setTimeout(() => {
      setArr(["red", "blue"]);
    }, 2000);
  }, []);
  return (
    <div className="App">
      {arr.map((backgroundColor, index) => (
        <Square
          index={index}
          backgroundColor={backgroundColor}
          key={backgroundColor}
        />
      ))}
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
  position: relative;
}

.square {
  transition: top 0.5s ease-out;
  width: 100px;
  height: 100px;
  position: absolute;
}

我已经创建了问题的代码框示例：https ://codesandbox.io/s/strange-framework-t2rq9