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

ಇದು ನಿಮಗಾಗಿ ನಿರ್ವಹಿಸುವುದು

ಹೊಸ ವಸ್ತುಗಳು ಸೀಮಿತ stagger ನೊಂದಿಗೆ ಪ್ರವೇಶಿಸುತ್ತವೆ ಮತ್ತು ಮುಟ್ಟದವು ಅಲುಗಾಡದೆ ಉಳಿಯುತ್ತವೆ.
ತೆಗೆದ ವಸ್ತುಗಳು ಹರಿವಿನಿಂದ ಹೊರಬಂದು ಇದ್ದಲ್ಲೇ ಅನಿಮೇಟ್ ಆಗಿ ಹೊರಹೋಗುತ್ತವೆ, ಮತ್ತು ಉಳಿದವು ಖಾಲಿ ಜಾಗಕ್ಕೆ ಜಾರುತ್ತವೆ.
ಕ್ರಮ ಬದಲಾದ ವಸ್ತುಗಳು ಹೊಸ ಜಾಗಗಳಿಗೆ ಜಾರುತ್ತವೆ.
ಇನ್ನೊಂದು ಬದಲಾವಣೆಯಿಂದ ಅಡಚಣೆಯಾದ ಚಲನೆಗಳು ತಮ್ಮ ವೇಗ ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ.
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`		ಪ್ರತಿ ವಸ್ತು ಎಲಿಮೆಂಟ್‌ಗೆ class; `itemStyle` ಅದರ inline style ಹೊಂದಿಸುತ್ತದೆ.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	ವಸ್ತುಗಳು ಹೇಗೆ ಬಂದು ಹೋಗುತ್ತವೆ.
`distance`	`number`	`16`	`rise` ಮತ್ತು `slide` ನ ಸಾಗುವ ದೂರ, ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ.
`stagger`	`number`	`40`	ಪ್ರವೇಶಿಸುವ ವಸ್ತುಗಳ ನಡುವಿನ ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳು.
`order`	`'forward' \| 'reverse'`	`'forward'`	Stagger ನ ದಿಕ್ಕು.
`present`	`boolean`	`true`	`false` ಲೇಔಟ್ ಉಳಿಸಿಕೊಂಡು ಪ್ರತಿ ವಸ್ತುವನ್ನು ಅನಿಮೇಟ್ ಮಾಡಿ ಹೊರಹಾಕುತ್ತದೆ; `true` ಅವನ್ನು ಮರಳಿ ತರುತ್ತದೆ.
`initial`	`boolean`	`true`	ಪಟ್ಟಿ ಮೌಂಟ್ ಆದಾಗ ಪ್ರವೇಶ ಪ್ಲೇ ಮಾಡಿ.
`playKey`	`string \| number`		ಇದನ್ನು ಬದಲಿಸಿದರೆ ಪ್ರವೇಶ ಮತ್ತೆ ಪ್ಲೇ ಆಗುತ್ತದೆ.
`transition`	`Transition`	`spring`	ಪ್ರವೇಶಿಸುವ ಮತ್ತು ನಿರ್ಗಮಿಸುವ ವಸ್ತುಗಳಿಗೆ ಟ್ರಾನ್ಸಿಶನ್.
`layoutTransition`	`Transition`	`spring`	ಹೊಸ ಜಾಗಗಳಿಗೆ ಜಾರುವ ವಸ್ತುಗಳಿಗೆ ಟ್ರಾನ್ಸಿಶನ್.

ಇತರ props ರೆಂಡರ್ ಆಗುವ ಎಲಿಮೆಂಟ್‌ಗೆ ಹೋಗುತ್ತವೆ, ಹೀಗಾಗಿ className, style ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಎಂದಿನಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ.

ವೆಬ್ ಮತ್ತು React Native

ಪ್ರತಿ ವಸ್ತುವಿಗೆ itemClassName ನಿಂದ ಶೈಲಿ ಕೊಟ್ಟ ಹೊದಿಕೆ ಎಲಿಮೆಂಟ್ ಸಿಗುತ್ತದೆ (ul ಅಥವಾ ol ಒಳಗೆ li, ಇಲ್ಲದಿದ್ದರೆ div; itemAs ಅದನ್ನು ಬದಲಿಸುತ್ತದೆ).

key ಗಳು ವಿಶಿಷ್ಟವಾಗಿರಬೇಕು. ಒಟ್ಟು ಎತ್ತರವನ್ನೂ ಅನಿಮೇಟ್ ಮಾಡಲು ಪಟ್ಟಿಯನ್ನು MotionHeight ನಲ್ಲಿ ಸುತ್ತಿ.