使用React更改列表顺序的CSS动画

npm install react-transition-group

import React, { useState } from 'react';
import { CSSTransitionGroup } from 'react-transition-group';
import './App.css';

function App() {
  const [items, setItems] = useState([
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ]);

  const moveItem = (id, direction) => {
    const sortedItems = [...items].sort((a, b) => {
      if (direction === 'asc') {
        return a.id - b.id;
      } else {
        return b.id - a.id;
      }
    });
    setItems(sortedItems);
  };

  return (
    <div className="App">
      <button onClick={() => moveItem(null, 'asc')}>升序</button>
      <button onClick={() => moveItem(null, 'desc')}>降序</button>
      <CSSTransitionGroup
        transitionName="list"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}
      >
        {items.map((item) => (
          <div key={item.id} className="list-item">
            {item.text}
          </div>
        ))}
      </CSSTransitionGroup>
    </div>
  );
}

export default App;

.list-item {
  display: inline-block;
  margin-right: 10px;
  background-color: lightblue;
  padding: 10px;
  border-radius: 5px;
  transition: all 0.5s ease-in-out;
}

.list-enter {
  opacity: 0;
  transform: translateY(-20px);
}

.list-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.list-exit {
  opacity: 1;
  transform: translateY(0);
}

.list-exit-active {
  opacity: 0;
  transform: translateY(20px);
}