MotionList

Μια λίστα από δεδομένα που κινεί μόνο ό,τι άλλαξε.

WebReact 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`	Επιστρέφει μοναδικό, σταθερό key για ένα στοιχείο. Από προεπιλογή `item.id`, ή το ίδιο το στοιχείο για συμβολοσειρές και αριθμούς.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Σχεδιάζει ένα στοιχείο.
`as`	`element`	`'div'`	Το στοιχείο προς απόδοση.
`itemAs`	`element`	`'li' \| 'div'`	Το στοιχείο για κάθε στοιχείο λίστας.
`itemClassName`	`string`		Κλάση για κάθε στοιχείο λίστας· το `itemStyle` ορίζει το inline στυλ του.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Πώς μπαίνουν και βγαίνουν τα στοιχεία.
`distance`	`number`	`16`	Διαδρομή των `rise` και `slide` σε pixels.
`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 και οι χειριστές συμβάντων λειτουργούν κανονικά.

Web και React Native

Κάθε στοιχείο παίρνει ένα στοιχείο περιτύλιξης (li μέσα σε ul ή ol, αλλιώς div· το itemAs το αλλάζει) με στυλ από το itemClassName.

Τα keys πρέπει να είναι μοναδικά. Τυλίξτε τη λίστα σε MotionHeight για να κινείται και το συνολικό της ύψος.