MotionList

Seznam iz podatkov, ki animira le spremenjeno.

SpletReact NativeSeznami

Preizkusite

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Najkrajša uporaba

Todos.jsx

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

Kaj uredi namesto vas

Novi elementi vstopijo z omejeno kaskado, nedotaknjeni pa mirujejo.
Odstranjeni elementi zapustijo tok in se animirajo ven tam, kjer so bili, ostali pa zdrsnejo v vrzel.
Prerazporejeni elementi zdrsnejo na nove položaje.
Premiki, ki jih prekine druga sprememba, ohranijo hitrost.
present={false} animira vse elemente ven, playKey pa predvaja vstop znova.

Uporabite jo za

Seznam opravil.
Filtrirani rezultati iskanja.
Nakupovalna košarica.

Props

Prop	Tip	Privzeto	Opis
`items`	`readonly T[]`	`—`obvezno	Vaše polje podatkov.
`getKey`	`(item) => string \| number`	`item.id`	Vrne enoličen, stabilen ključ za element. Privzeto `item.id` ali sam element za nize in števila.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Nariše element.
`as`	`element`	`'div'`	Element za upodobitev.
`itemAs`	`element`	`'li' \| 'div'`	Element za vsak element seznama.
`itemClassName`	`string`		Razred za vsak element; `itemStyle` nastavi njegov vrstični slog.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Kako elementi vstopijo in odidejo.
`distance`	`number`	`16`	Pot `rise` in `slide` v pikslih.
`stagger`	`number`	`40`	Milisekunde med vstopajočimi elementi.
`order`	`'forward' \| 'reverse'`	`'forward'`	Smer kaskade.
`present`	`boolean`	`true`	`false` animira vse elemente ven in ohrani postavitev; `true` jih vrne.
`initial`	`boolean`	`true`	Predvaja vstop, ko se seznam priklopi.
`playKey`	`string \| number`		Njegova sprememba znova predvaja vstop.
`transition`	`Transition`	`spring`	Prehod za vstopajoče in odhajajoče elemente.
`layoutTransition`	`Transition`	`spring`	Prehod za elemente, ki drsijo na nove položaje.

Druge props gredo upodobljenemu elementu, zato className, style in obravnave dogodkov delujejo kot običajno.

Splet in React Native

Vsak element dobi ovojni element (li v ul ali ol, sicer div; itemAs to spremeni), oblikovan z itemClassName.

Ključi morajo biti enolični. Seznam ovijte v MotionHeight, da se animira tudi njegova skupna višina.