Блог

Я пытаюсь анимировать вертикальное положение элементов в списке с помощью ReactJS. Элементы могут быть произвольно упорядочены в списке, однако все они имеют уникальные идентификаторы.

Элементы в списке имеют статическую высоту и изменяется только их вертикальное положение.

Я могу применить transform: translate(0px, ${index * height}px) к каждому элементу и использовать transition: transform 1s ease-in-out для анимации изменений в переводе. Это приводит к тому, что элементы отображаются в соответствующем порядке.

Однако, когда элементы упорядочиваются, анимируются только элементы, перемещающиеся «вверх»; элементы, которые в конечном итоге оказываются ниже, автоматически «защелкиваются» на свои места.

В идеале я бы хотел сделать это без помощи библиотеки, если только проблема не сложнее, чем я думаю, ее решить.

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