MotionList

Sąrašas iš duomenų, animuojantis tik tai, kas pasikeitė.

ŽiniatinklisReact NativeSąrašai

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Trumpiausias naudojimas

Todos.jsx

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

Ką jis sutvarko už jus

Nauji elementai įeina ribota kaskada, o nepaliesti lieka vietoje.
Pašalinti elementai palieka srautą ir animuojami išeidami savo vietoje, o likusieji įslenka į tarpą.
Pertvarkyti elementai nuslysta į naujas vietas.
Kito pakeitimo pertraukti judesiai išlaiko greitį.
present={false} animuoja visų elementų išėjimą, o playKey iš naujo groja įėjimą.

Naudokite jį

Užduočių sąrašas.
Filtruoti paieškos rezultatai.
Pirkinių krepšelis.

Props

Prop	Tipas	Numatytoji	Aprašymas
`items`	`readonly T[]`	`—`privaloma	Jūsų duomenų masyvas.
`getKey`	`(item) => string \| number`	`item.id`	Grąžina unikalų, stabilų elemento key. Pagal numatymą `item.id` arba pats elementas eilutėms ir skaičiams.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Nupiešia elementą.
`as`	`element`	`'div'`	Atvaizduojamas elementas.
`itemAs`	`element`	`'li' \| 'div'`	Kiekvieno elemento apvalkalas.
`itemClassName`	`string`		Klasė kiekvienam elementui; `itemStyle` nustato jo vidinį stilių.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Kaip elementai įeina ir išeina.
`distance`	`number`	`16`	`rise` ir `slide` atstumas pikseliais.
`stagger`	`number`	`40`	Milisekundės tarp įeinančių elementų.
`order`	`'forward' \| 'reverse'`	`'forward'`	Kaskados kryptis.
`present`	`boolean`	`true`	`false` animuoja visų elementų išėjimą išlaikydamas išdėstymą; `true` juos grąžina.
`initial`	`boolean`	`true`	Groti įėjimą, kai sąrašas prijungiamas.
`playKey`	`string \| number`		Jį pakeitus įėjimas grojamas iš naujo.
`transition`	`Transition`	`spring`	Perėjimas įeinantiems ir išeinantiems elementams.
`layoutTransition`	`Transition`	`spring`	Perėjimas elementams, slystantiems į naujas vietas.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

Kiekvienas elementas gauna apgaubiantį elementą (li viduje ul ar ol, kitaip div; itemAs tai keičia), kurio stilius nustatomas su itemClassName.

key turi būti unikalūs. Apgaubkite sąrašą MotionHeight, kad būtų animuojamas ir jo bendras aukštis.