使用react对多个文本进行动画处理

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

class TextAnimation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      texts: ['Text 1', 'Text 2', 'Text 3'],
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      texts: [...prevState.texts, `Text ${prevState.texts.length + 1}`],
    }));
  };

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

    return (
      <div>
        <button onClick={this.handleClick}>Add Text</button>
        <TransitionGroup>
          {texts.map((text, index) => (
            <CSSTransition key={index} timeout={500} classNames="fade">
              <div>{text}</div>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </div>
    );
  }
}

export default TextAnimation;