在react组件中加载页面时，按顺序使文本元素淡入

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-text {
  animation: fadeIn 1s ease-in;
}

import React, { Component } from 'react';

class FadeInText extends Component {
  state = {
    showText1: false,
    showText2: false,
    showText3: false
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ showText1: true });
    }, 1000);

    setTimeout(() => {
      this.setState({ showText2: true });
    }, 2000);

    setTimeout(() => {
      this.setState({ showText3: true });
    }, 3000);
  }

  render() {
    return (
      <div>
        {this.state.showText1 && <p className="fade-in-text">文本元素1</p>}
        {this.state.showText2 && <p className="fade-in-text">文本元素2</p>}
        {this.state.showText3 && <p className="fade-in-text">文本元素3</p>}
      </div>
    );
  }
}

export default FadeInText;