React:如何在动态生成的表项上添加淡出动画？

npm install react-transition-group

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

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }

  addItem = () => {
    const newItem = 'New Item';
    this.setState(prevState => ({
      items: [...prevState.items, newItem]
    }));
  }

  removeItem = (index) => {
    this.setState(prevState => ({
      items: prevState.items.filter((item, i) => i !== index)
    }));
  }

  render() {
    const { items } = this.state;

    return (
      <div>
        <button onClick={this.addItem}>Add Item</button>
        <TransitionGroup>
          {items.map((item, index) => (
            <CSSTransition key={index} timeout={500} classNames="fade">
              <div>
                {item}
                <button onClick={() => this.removeItem(index)}>Remove</button>
              </div>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </div>
    );
  }
}

.fade-enter {
  opacity: 0;
}

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

.fade-exit {
  opacity: 1;
}

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