MotionList

Lista datasta, joka animoi vain muuttuneen.

WebReact NativeListat

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Todos.jsx

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

Mitä se hoitaa puolestasi

Uudet kohteet saapuvat rajatulla porrastuksella, ja koskemattomat pysyvät paikallaan.
Poistetut kohteet poistuvat virrasta ja animoituvat ulos paikallaan, kun muut liukuvat aukkoon.
Uudelleen järjestetyt kohteet liukuvat uusiin sijainteihinsa.
Toisen muutoksen keskeyttämät siirrot säilyttävät nopeutensa.
present={false} animoi jokaisen kohteen ulos, ja playKey toistaa saapumisen uudelleen.

Käytä sitä

Tehtävälista.
Suodatetut hakutulokset.
Ostoskori.

Props

Prop	Tyyppi	Oletus	Kuvaus
`items`	`readonly T[]`	`—`pakollinen	Datataulukkosi.
`getKey`	`(item) => string \| number`	`item.id`	Palauttaa kohteelle yksilöllisen, vakaan keyn. Oletuksena `item.id`, merkkijonoille ja luvuille kohde itse.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Piirtää kohteen.
`as`	`element`	`'div'`	Renderöitävä elementti.
`itemAs`	`element`	`'li' \| 'div'`	Kunkin kohteen elementti.
`itemClassName`	`string`		Luokka kullekin kohde-elementille; `itemStyle` asettaa sen inline-tyylin.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Miten kohteet saapuvat ja poistuvat.
`distance`	`number`	`16`	`rise`- ja `slide`-liikkeen matka pikseleinä.
`stagger`	`number`	`40`	Millisekunnit saapuvien kohteiden välillä.
`order`	`'forward' \| 'reverse'`	`'forward'`	Porrastuksen suunta.
`present`	`boolean`	`true`	`false` animoi jokaisen kohteen ulos asettelun säilyttäen; `true` tuo ne takaisin.
`initial`	`boolean`	`true`	Toista saapuminen, kun lista kiinnitetään.
`playKey`	`string \| number`		Sen muuttaminen toistaa saapumisen uudelleen.
`transition`	`Transition`	`spring`	Siirtymä saapuville ja poistuville kohteille.
`layoutTransition`	`Transition`	`spring`	Siirtymä uusiin sijainteihin liukuville kohteille.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

Jokainen kohde saa kääre-elementin (li ul- tai ol-elementin sisällä, muuten div; itemAs muuttaa sen), jota muotoillaan itemClassName-arvolla.

Keyjen on oltava yksilöllisiä. Kääri lista MotionHeight-komponenttiin animoidaksesi myös sen kokonaiskorkeuden.