Estoy tratando de animar la posición vertical de los elementos dentro de una lista usando ReactJS. Los elementos se pueden ordenar arbitrariamente dentro de la lista, sin embargo, todos tienen identificadores únicos.

Los elementos de la lista tienen una altura estática y solo cambia su posición vertical.

Puedo aplicar transform: translate(0px, ${index * height}px) a cada elemento y usar transition: transform 1s ease-in-out para animar los cambios en la traducción. Esto da como resultado que los elementos se representen en el orden apropiado.

Sin embargo, cuando se reordenan los elementos, solo se animan los elementos que se mueven "hacia arriba"; los elementos que terminan más abajo se "ajustan" en su lugar automáticamente.

Idealmente, me gustaría hacer esto sin la ayuda de una biblioteca, a menos que el problema sea más difícil de resolver de lo que creo.

 import shuffle from "lodash.shuffle"; import { useState } from "react"; const data = [ { id: 1, name: "Foo" }, { id: 2, name: "Bar" }, { id: 3, name: "Baz" } ]; export default function App() { const [items, setItems] = useState(data); return ( <div> <button onClick={() => { setItems(shuffle(data)); }} > Shuffle </button> <div style={{ position: "relative" }}> {items.map(({ id, name }, index) => ( <div key={id} style={{ position: "absolute", border: "1px solid #ddd", width: "100%", height: 42, boxSizing: "border-box", transition: "transform 1s ease-in-out", transform: `translate(${0}px, ${index * 42}px)` }} > {name} </div> ))} </div> </div> ); }