MotionList

Daftar dari data yang hanya menganimasikan yang berubah.

WebReact NativeDaftar

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

Todos.jsx

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

Yang ditanganinya untuk Anda

Item baru masuk dengan kaskade terbatas sementara item yang tak tersentuh tetap diam.
Item yang dihapus keluar dari alur dan beranimasi keluar di tempatnya sementara sisanya bergeser mengisi celah.
Item yang diurutkan ulang meluncur ke posisi barunya.
Gerakan yang diinterupsi perubahan lain mempertahankan kecepatannya.
present={false} menganimasikan setiap item keluar, dan playKey memutar ulang animasi masuk.

Gunakan untuk

Daftar tugas.
Hasil pencarian yang difilter.
Keranjang belanja.

Props

Prop	Tipe	Bawaan	Deskripsi
`items`	`readonly T[]`	`—`wajib	Array data Anda.
`getKey`	`(item) => string \| number`	`item.id`	Mengembalikan key yang unik dan stabil untuk sebuah item. Bawaannya `item.id`, atau item itu sendiri untuk string dan angka.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Menggambar item.
`as`	`element`	`'div'`	Elemen yang dirender.
`itemAs`	`element`	`'li' \| 'div'`	Elemen untuk setiap item.
`itemClassName`	`string`		Class untuk setiap elemen item; `itemStyle` mengatur gaya inline-nya.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Cara item masuk dan pergi.
`distance`	`number`	`16`	Jarak tempuh `rise` dan `slide` dalam piksel.
`stagger`	`number`	`40`	Milidetik antar item yang masuk.
`order`	`'forward' \| 'reverse'`	`'forward'`	Arah kaskade.
`present`	`boolean`	`true`	`false` menganimasikan setiap item keluar sambil mempertahankan tata letak; `true` mengembalikannya.
`initial`	`boolean`	`true`	Putar animasi masuk saat daftar terpasang.
`playKey`	`string \| number`		Mengubahnya memutar ulang animasi masuk.
`transition`	`Transition`	`spring`	Transisi untuk item yang masuk dan pergi.
`layoutTransition`	`Transition`	`spring`	Transisi untuk item yang meluncur ke posisi baru.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

Setiap item mendapat elemen pembungkus (li di dalam ul atau ol, selain itu div; itemAs mengubahnya) yang diberi gaya dengan itemClassName.

Key harus unik. Bungkus daftar dengan MotionHeight untuk menganimasikan tinggi totalnya juga.