transition-group与animate

transition-group是React的一个组件，它用于在一组DOM元素上添加动画效果。它通常与CSSTransition组件一起使用，CSSTransition组件用于定义动画的进入和退出效果。

下面是一个使用transition-group和CSSTransition的例子：

import React, { Component } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }

  addItem = () => {
    const newItem = prompt('Enter item name:');
    if (newItem) {
      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>
    );
  }
}

export default App;

在上面的例子中，我们使用了transition-group和CSSTransition来实现一个简单的列表，点击"Add Item"按钮可以添加新的项，每个项都有一个"Remove"按钮可以删除。当添加或删除项时，会有一个淡入淡出的动画效果。

CSS样式文件（style.css）中定义了.fade类的动画效果，你可以根据自己的需求进行修改。