MotionList

En liste fra data, der kun animerer det, der ændrede sig.

WebReact NativeLister

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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 brug

Todos.jsx

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

Det klarer den for dig

Nye elementer kommer ind med en begrænset kaskade, mens uberørte elementer står stille.
Fjernede elementer forlader flowet og animeres ud, hvor de var, mens resten glider ind i hullet.
Omsorterede elementer glider til deres nye positioner.
Flytninger, der afbrydes af en anden ændring, bevarer deres hastighed.
present={false} animerer alle elementer ud, og playKey afspiller indgangen igen.

Brug den til

En opgaveliste.
Filtrerede søgeresultater.
En indkøbskurv.

Props

Prop	Type	Standard	Beskrivelse
`items`	`readonly T[]`	`—`påkrævet	Dit data-array.
`getKey`	`(item) => string \| number`	`item.id`	Returnerer en unik, stabil nøgle for et element. Standard er `item.id`, eller selve elementet for strenge og tal.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Tegner et element.
`as`	`element`	`'div'`	Elementet, der renderes.
`itemAs`	`element`	`'li' \| 'div'`	Elementet for hvert punkt.
`itemClassName`	`string`		Klasse for hvert punkts element; `itemStyle` sætter dets inline-style.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Hvordan elementer kommer ind og forlader.
`distance`	`number`	`16`	Afstand for `rise` og `slide` i pixels.
`stagger`	`number`	`40`	Millisekunder mellem indkommende elementer.
`order`	`'forward' \| 'reverse'`	`'forward'`	Kaskadens retning.
`present`	`boolean`	`true`	`false` animerer alle elementer ud og bevarer layoutet; `true` bringer dem tilbage.
`initial`	`boolean`	`true`	Afspil indgangen, når listen monteres.
`playKey`	`string \| number`		At ændre den afspiller indgangen igen.
`transition`	`Transition`	`spring`	Overgang til elementer, der kommer ind og forlader.
`layoutTransition`	`Transition`	`spring`	Overgang til elementer, der glider til nye positioner.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

Hvert element får et wrapper-element (li inde i ul eller ol, ellers div; itemAs ændrer det), der styles med itemClassName.

Nøgler skal være unikke. Indpak listen i MotionHeight for også at animere dens samlede højde.