使用react为表格行添加动画

npm install react react-dom react-transition-group

import React, { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

const TableWithAnimation = () => {
  const [data, setData] = useState([
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
  ]);

  const removeRow = (id) => {
    setData(data.filter(item => item.id !== id));
  };

  return (
    <table>
      <tbody>
        <TransitionGroup>
          {data.map(item => (
            <CSSTransition key={item.id} timeout={500} classNames="row">
              <tr>
                <td>{item.name}</td>
                <td>
                  <button onClick={() => removeRow(item.id)}>Remove</button>
                </td>
              </tr>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </tbody>
    </table>
  );
};

export default TableWithAnimation;

.row-enter {
  opacity: 0;
}

.row-enter-active {
  opacity: 1;
  transition: opacity 500ms;
}

.row-exit {
  opacity: 1;
}

.row-exit-active {
  opacity: 0;
  transition: opacity 500ms;
}