Tengo una matriz de 2 elementos con posición absoluta, que están diseñados a través de la propiedad CSS top . Además, hay una transición CSS enganchada a la tecla top . Cuando intercambio posiciones de elementos, algunos elementos (aunque la clave no cambia), el elemento html se vuelve a crear, por lo tanto, la transición de CSS no ocurre.

 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; }

He creado un ejemplo de codesandbox del problema: https://codesandbox.io/s/strange-framework-t2rq9