在react中设置动画前的div位置-在动画中显示淡出

@keyframes fade-out {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(100px, 100px);
  }
}

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

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

const App = () => {
  const [isFadeOut, setIsFadeOut] = useState(false);

  const handleFadeOut = () => {
    setIsFadeOut(true);
  };

  return (
    <div>
      <button onClick={handleFadeOut}>Fade Out</button>
      {isFadeOut && <div className="fade-out-div">This is a fading out div</div>}
    </div>
  );
};

export default App;