MotionList

O listă din date care animă doar ce s-a schimbat.

WebReact NativeListe

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Cea mai scurtă utilizare

Todos.jsx

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

Ce rezolvă în locul dumneavoastră

Elementele noi intră într-o cascadă limitată, în timp ce cele neatinse stau pe loc.
Elementele eliminate ies din flux și se animă spre ieșire acolo unde erau, în timp ce restul alunecă în gol.
Elementele reordonate alunecă spre noile poziții.
Mișcările întrerupte de o altă schimbare își păstrează viteza.
present={false} animă ieșirea fiecărui element, iar playKey redă din nou intrarea.

Folosiți-o pentru

O listă de sarcini.
Rezultate de căutare filtrate.
Un coș de cumpărături.

Props

Prop	Tip	Implicit	Descriere
`items`	`readonly T[]`	`—`obligatoriu	Tabloul cu datele dumneavoastră.
`getKey`	`(item) => string \| number`	`item.id`	Returnează un key unic și stabil pentru un element. Implicit `item.id` sau elementul însuși pentru șiruri și numere.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Desenează un element.
`as`	`element`	`'div'`	Elementul de randat.
`itemAs`	`element`	`'li' \| 'div'`	Elementul pentru fiecare element din listă.
`itemClassName`	`string`		Clasă pentru fiecare element din listă; `itemStyle` îi setează stilul inline.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Cum intră și ies elementele.
`distance`	`number`	`16`	Distanța parcursă de `rise` și `slide`, în pixeli.
`stagger`	`number`	`40`	Milisecunde între elementele care intră.
`order`	`'forward' \| 'reverse'`	`'forward'`	Direcția cascadei.
`present`	`boolean`	`true`	`false` animă ieșirea fiecărui element păstrând layoutul; `true` le aduce înapoi.
`initial`	`boolean`	`true`	Redă intrarea când lista se montează.
`playKey`	`string \| number`		Schimbarea lui redă din nou intrarea.
`transition`	`Transition`	`spring`	Tranziția pentru elementele care intră și ies.
`layoutTransition`	`Transition`	`spring`	Tranziția pentru elementele care alunecă spre poziții noi.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

Fiecare element primește un element de înveliș (li în ul sau ol, altfel div; itemAs schimbă asta), stilizat cu itemClassName.

Key-urile trebuie să fie unice. Înfășurați lista în MotionHeight ca să-i animați și înălțimea totală.