在ReactJS中一个接一个地淡入部分元素

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

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

import React from 'react';
import './styles.css';

const FadeInElements = () => {
  return (
    <div>
      <div className="fadeInElement">元素1</div>
      <div className="fadeInElement">元素2</div>
      <div className="fadeInElement">元素3</div>
    </div>
  );
};

export default FadeInElements;

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

const FadeInElements = () => {
  const elements = ['元素1', '元素2', '元素3'];

  return (
    <TransitionGroup>
      {elements.map((element, index) => (
        <CSSTransition key={index} classNames="fadeIn" timeout={1000}>
          <div className="fadeInElement">{element}</div>
        </CSSTransition>
      ))}
    </TransitionGroup>
  );
};

export default FadeInElements;