将淡入动画添加到React中的列表元素

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

import React, { useState, useEffect } from 'react';
import './styles.css';

const List = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // 模拟异步获取列表数据
    setTimeout(() => {
      const data = ['Item 1', 'Item 2', 'Item 3'];
      setItems(data);
    }, 1000);
  }, []);

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index} className="fade-in">
          {item}
        </li>
      ))}
    </ul>
  );
};

export default List;

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