MotionList

Danh sách từ dữ liệu chỉ tạo hoạt ảnh cho phần thay đổi.

WebReact NativeDanh sách

Thử ngay

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

Cách dùng ngắn nhất

Todos.jsx

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

Những gì nó xử lý giúp bạn

Mục mới đi vào với độ so le có giới hạn trong khi các mục không đổi đứng yên.
Mục bị xóa rời khỏi dòng chảy và hoạt ảnh ra tại chỗ trong khi phần còn lại trượt vào chỗ trống.
Mục được sắp xếp lại lướt đến vị trí mới.
Các chuyển động bị một thay đổi khác ngắt vẫn giữ vận tốc.
present={false} tạo hoạt ảnh đưa mọi mục ra, còn playKey phát lại hoạt ảnh vào.

Dùng cho

Danh sách việc cần làm.
Kết quả tìm kiếm đã lọc.
Giỏ hàng.

Props

Prop	Kiểu	Mặc định	Mô tả
`items`	`readonly T[]`	`—`bắt buộc	Mảng dữ liệu của bạn.
`getKey`	`(item) => string \| number`	`item.id`	Trả về key duy nhất, ổn định cho một mục. Mặc định là `item.id`, hoặc chính mục đó với chuỗi và số.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Vẽ một mục.
`as`	`element`	`'div'`	Phần tử được render.
`itemAs`	`element`	`'li' \| 'div'`	Phần tử cho từng mục.
`itemClassName`	`string`		Class cho từng phần tử mục; `itemStyle` đặt style nội tuyến của nó.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Cách các mục vào và ra.
`distance`	`number`	`16`	Quãng di chuyển của `rise` và `slide` tính bằng pixel.
`stagger`	`number`	`40`	Mili giây giữa các mục đi vào.
`order`	`'forward' \| 'reverse'`	`'forward'`	Hướng so le.
`present`	`boolean`	`true`	`false` tạo hoạt ảnh đưa mọi mục ra nhưng giữ bố cục; `true` đưa chúng trở lại.
`initial`	`boolean`	`true`	Phát hoạt ảnh vào khi danh sách được mount.
`playKey`	`string \| number`		Thay đổi giá trị này sẽ phát lại hoạt ảnh vào.
`transition`	`Transition`	`spring`	Chuyển tiếp cho mục đi vào và rời đi.
`layoutTransition`	`Transition`	`spring`	Chuyển tiếp cho mục lướt đến vị trí mới.

Các props khác được chuyển tới phần tử được render, nên className, style và trình xử lý sự kiện hoạt động như bình thường.

Web và React Native

Mỗi mục có một phần tử bọc (li trong ul hoặc ol, ngoài ra là div; itemAs để đổi) được tạo kiểu bằng itemClassName.

Key phải là duy nhất. Bọc danh sách trong MotionHeight để tạo hoạt ảnh cho cả tổng chiều cao.