使用React和CSS关闭屏幕时淡出动画

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

const FadeOutAnimation = () => {
  return <div className="fade-out-animation"></div>;
};

export default FadeOutAnimation;

.fade-out-animation {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  animation: fadeOut 1s ease-in-out forwards;
}

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

import React from 'react';
import FadeOutAnimation from './FadeOutAnimation';

const App = () => {
  return (
    <div>
      {/* 其他内容 */}
      <FadeOutAnimation />
    </div>
  );
};

export default App;