如何在函数组件中使用ReactTransitionGroup回调

npm install react-transition-group

yarn add react-transition-group

import React from 'react';
import { CSSTransition } from 'react-transition-group';

const MyComponent = () => {
  const [show, setShow] = React.useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="content">Hello, World!</div>
      </CSSTransition>
    </div>
  );
};

export default MyComponent;

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}