MotionList

En lista från data som bara animerar det som ändrats.

WebbReact NativeListor

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

Todos.jsx

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

Det här sköter den åt dig

Nya objekt kommer in med begränsad kaskad medan orörda objekt står still.
Borttagna objekt lämnar flödet och animeras ut där de var medan resten glider in i luckan.
Omsorterade objekt glider till sina nya platser.
Förflyttningar som avbryts av en annan ändring behåller sin hastighet.
present={false} animerar ut alla objekt, och playKey spelar upp intåget igen.

Använd den för

En att göra-lista.
Filtrerade sökresultat.
En varukorg.

Props

Prop	Typ	Standard	Beskrivning
`items`	`readonly T[]`	`—`krävs	Din dataarray.
`getKey`	`(item) => string \| number`	`item.id`	Returnerar en unik, stabil nyckel för ett objekt. Standard är `item.id`, eller själva objektet för strängar och tal.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Ritar ett objekt.
`as`	`element`	`'div'`	Elementet som renderas.
`itemAs`	`element`	`'li' \| 'div'`	Elementet för varje objekt.
`itemClassName`	`string`		Klass för varje objektelement; `itemStyle` sätter dess inline-style.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Hur objekt kommer in och lämnar.
`distance`	`number`	`16`	Sträcka för `rise` och `slide` i pixlar.
`stagger`	`number`	`40`	Millisekunder mellan inkommande objekt.
`order`	`'forward' \| 'reverse'`	`'forward'`	Kaskadens riktning.
`present`	`boolean`	`true`	`false` animerar ut alla objekt och behåller layouten; `true` tar tillbaka dem.
`initial`	`boolean`	`true`	Spela upp intåget när listan monteras.
`playKey`	`string \| number`		Att ändra den spelar upp intåget igen.
`transition`	`Transition`	`spring`	Övergång för objekt som kommer in och lämnar.
`layoutTransition`	`Transition`	`spring`	Övergång för objekt som glider till nya platser.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

Varje objekt får ett omslagselement (li inuti ul eller ol, annars div; itemAs ändrar det) som stylas med itemClassName.

Nycklar måste vara unika. Svep in listan i MotionHeight för att animera även dess totala höjd.