MotionList

Eine Liste aus Daten, die nur das Geänderte animiert.

WebReact NativeListen

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

App.jsx

import { useState } from 'react';
import { MotionList } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const ideas = [
  'Plan the launch',
  'Write release notes',
  'Record a demo',
  'Update the docs',
  'Reply to issues',
  'Tag the release',
];

export default function App({ effect = 'rise', stagger = 40, distance = 18 }) {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Review the design' },
    { id: 2, title: 'Fix the flaky test' },
    { id: 3, title: 'Ship the changelog' },
  ]);
  const [next, setNext] = useState(4);

  const add = () => {
    setTasks([{ id: next, title: ideas[next % ideas.length] }, ...tasks]);
    setNext(next + 1);
  };
  const remove = (id) => setTasks(tasks.filter((task) => task.id !== id));
  const shuffle = () => setTasks([...tasks.slice(1), tasks[0]].filter(Boolean));
  const sort = () => setTasks([...tasks].sort((a, b) => a.title.localeCompare(b.title)));

  return (
    <div className="stage">
      <div className="buttons">
        <button className="primary" onClick={add}>
          Add task
        </button>
        <button onClick={shuffle}>Move first to end</button>
        <button onClick={sort}>Sort A–Z</button>
      </div>
      <MotionList
        as="ul"
        className="tasks"
        items={tasks}
        effect={effect}
        stagger={stagger}
        distance={distance}
        renderItem={(task) => (
          <div className="task">
            <span>{task.title}</span>
            <button onClick={() => remove(task.id)}>Done</button>
          </div>
        )}
      />
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  max-width: 520px;
  min-height: 360px;
  margin: 0 auto;
  padding: 24px 20px;
  align-content: start;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.buttons button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons .primary {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

.tasks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: #fff;
}

.task button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #eaf6f0;
  color: #176b52;
  font:
    650 13px system-ui,
    sans-serif;
  cursor: pointer;
}

Kürzeste Nutzung

Todos.jsx

<MotionList as="ul" items={todos} renderItem={(todo) => <TodoRow todo={todo} />} />;

Was sie dir abnimmt

Neue Elemente erscheinen mit begrenztem Versatz, während unberührte Elemente stillstehen.
Entfernte Elemente verlassen den Fluss und animieren dort hinaus, wo sie waren, während der Rest in die Lücke gleitet.
Umsortierte Elemente gleiten an ihre neue Position.
Durch eine andere Änderung unterbrochene Bewegungen behalten ihr Tempo.
present={false} animiert alle Elemente hinaus, und playKey spielt das Erscheinen erneut ab.

Gut für

Eine Todo-Liste.
Gefilterte Suchergebnisse.
Ein Warenkorb.

props

Prop	Typ	Standard	Beschreibung
`items`	`readonly T[]`	`—`erforderlich	Dein Daten-Array.
`getKey`	`(item) => string \| number`	`item.id`	Gibt einen eindeutigen, stabilen Key für ein Element zurück. Standard ist `item.id` oder bei Strings und Zahlen das Element selbst.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Zeichnet ein Element.
`as`	`element`	`'div'`	Das zu rendernde Element.
`itemAs`	`element`	`'li' \| 'div'`	Das Element für jeden Eintrag.
`itemClassName`	`string`		Klasse für jedes Eintragselement; `itemStyle` setzt seinen Inline-Style.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Wie Elemente kommen und gehen.
`distance`	`number`	`16`	Weg von `rise` und `slide` in Pixeln.
`stagger`	`number`	`40`	Millisekunden zwischen erscheinenden Elementen.
`order`	`'forward' \| 'reverse'`	`'forward'`	Richtung des Versatzes.
`present`	`boolean`	`true`	`false` animiert alle Elemente hinaus und behält das Layout; `true` holt sie zurück.
`initial`	`boolean`	`true`	Das Erscheinen abspielen, wenn die Liste gemountet wird.
`playKey`	`string \| number`		Eine Änderung spielt das Erscheinen erneut ab.
`transition`	`Transition`	`spring`	Übergang für erscheinende und verschwindende Elemente.
`layoutTransition`	`Transition`	`spring`	Übergang für Elemente, die an neue Positionen gleiten.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

Jedes Element bekommt ein Wrapper-Element (li in ul oder ol, sonst div; itemAs ändert das), gestaltet mit itemClassName.

Keys müssen eindeutig sein. Umschließe die Liste mit MotionHeight, um auch ihre Gesamthöhe zu animieren.