MotionList

רשימה מנתונים שמנפישה רק את מה שהשתנה.

אינטרנטReact Nativeרשימות

נסו את זה

מכין את הדוגמה…

JavaScript כבוי. הקוד שלמטה הוא הדוגמה המלאה.

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

השימוש הקצר ביותר

Todos.jsx

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

מה הוא עושה בשבילכם

פריטים חדשים נכנסים בדירוג מוגבל בזמן שפריטים שלא נגעו בהם נשארים במקום.
פריטים שהוסרו יוצאים מהזרימה ויוצאים בתנועה במקומם, בזמן שהשאר מחליקים לסגור את הרווח.
פריטים שסודרו מחדש גולשים למיקומים החדשים.
תזוזות שהופרעו על ידי שינוי אחר שומרות על המהירות שלהן.
present={false} מוציא את כל הפריטים בתנועה, ו־playKey מנגן מחדש את הכניסה.

מתאים ל־

רשימת משימות.
תוצאות חיפוש מסוננות.
עגלת קניות.

Props

Prop	טיפוס	ברירת מחדל	תיאור
`items`	`readonly T[]`	`—`חובה	מערך הנתונים שלכם.
`getKey`	`(item) => string \| number`	`item.id`	מחזיר מפתח ייחודי ויציב לפריט. ברירת המחדל היא `item.id`, או הפריט עצמו למחרוזות ולמספרים.
`renderItem`	`(item, index) => ReactNode`	`item.label`	מצייר פריט.
`as`	`element`	`'div'`	האלמנט לרינדור.
`itemAs`	`element`	`'li' \| 'div'`	האלמנט לכל פריט.
`itemClassName`	`string`		class לאלמנט של כל פריט; `itemStyle` מגדיר את הסגנון המוטבע שלו.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	איך פריטים נכנסים ויוצאים.
`distance`	`number`	`16`	מרחק התנועה של `rise` ו־`slide` בפיקסלים.
`stagger`	`number`	`40`	מילישניות בין פריטים נכנסים.
`order`	`'forward' \| 'reverse'`	`'forward'`	כיוון הדירוג.
`present`	`boolean`	`true`	`false` מוציא את כל הפריטים בתנועה ושומר על הפריסה; `true` מחזיר אותם.
`initial`	`boolean`	`true`	לנגן את הכניסה כשהרשימה מורכבת.
`playKey`	`string \| number`		שינוי שלו מנגן מחדש את הכניסה.
`transition`	`Transition`	`spring`	מעבר לפריטים נכנסים ויוצאים.
`layoutTransition`	`Transition`	`spring`	מעבר לפריטים שגולשים למיקומים חדשים.

props אחרים עוברים לאלמנט המרונדר, כך ש־className, style ומטפלי אירועים עובדים כרגיל.

אינטרנט ו־React Native

כל פריט מקבל אלמנט עוטף (li בתוך ul או ol, אחרת div; itemAs משנה את זה) שמעוצב עם itemClassName.

המפתחות חייבים להיות ייחודיים. עטפו את הרשימה ב־MotionHeight כדי להנפיש גם את הגובה הכולל שלה.