MotionList

En liste fra data som bare animerer det som endret seg.

WebReact NativeLister

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Korteste bruk

Todos.jsx

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

Dette tar den seg av

Nye elementer kommer inn med begrenset kaskade mens urørte elementer står stille.
Fjernede elementer forlater flyten og animeres ut der de var, mens resten glir inn i hullet.
Omsorterte elementer glir til nye posisjoner.
Flyttinger som avbrytes av en annen endring, beholder hastigheten.
present={false} animerer alle elementer ut, og playKey spiller av inngangen på nytt.

Bruk den til

En gjøremålsliste.
Filtrerte søkeresultater.
En handlekurv.

Props

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrevd	Data-arrayen din.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøkkel for et element. Standard er `item.id`, eller selve elementet for strenger og tall.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Tegner et element.
`as`	`element`	`'div'`	Elementet som renderes.
`itemAs`	`element`	`'li' \| 'div'`	Elementet for hvert punkt.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` setter inline-stilen.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Hvordan elementer kommer inn og forlater.
`distance`	`number`	`16`	Avstand for `rise` og `slide` i piksler.
`stagger`	`number`	`40`	Millisekunder mellom innkommende elementer.
`order`	`'forward' \| 'reverse'`	`'forward'`	Kaskadens retning.
`present`	`boolean`	`true`	`false` animerer alle elementer ut og beholder layouten; `true` henter dem tilbake.
`initial`	`boolean`	`true`	Spill av inngangen når listen monteres.
`playKey`	`string \| number`		Å endre den spiller av inngangen på nytt.
`transition`	`Transition`	`spring`	Overgang for elementer som kommer inn og forlater.
`layoutTransition`	`Transition`	`spring`	Overgang for elementer som glir til nye posisjoner.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

Hvert element får et omslagselement (li inne i ul eller ol, ellers div; itemAs endrer det) som stiles med itemClassName.

Nøkler må være unike. Pakk inn listen i MotionHeight for også å animere totalhøyden.