React -添加时淡入，删除项时淡出

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

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

  const addItem = () => {
    const newItem = { id: Date.now() };
    setItems([...items, newItem]);
  };

  const removeItem = (id) => {
    setItems(items.filter(item => item.id !== id));
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {items.map(item => (
          <FadeInOut key={item.id} onFadeOut={() => removeItem(item.id)}>
            <li>{item.id}</li>
          </FadeInOut>
        ))}
      </ul>
    </div>
  );
};

const FadeInOut = ({ children, onFadeOut }) => {
  const [isVisible, setIsVisible] = useState(true);

  const handleTransitionEnd = () => {
    if (!isVisible) {
      onFadeOut();
    }
  };

  return (
    <div
      className={`fade-in-out ${isVisible ? 'visible' : 'hidden'}`}
      onTransitionEnd={handleTransitionEnd}
    >
      {children}
    </div>
  );
};

export default App;