transition-wrapper.js

import { TransitionGroup, CSSTransition } from "react-transition-group";

export const TransitionComponent = ({
  children,
  isAnimated,
  classNames,
  timeout
}) => (
  <TransitionGroup>
    <CSSTransition
      key={isAnimated}
      timeout={timeout}
      // onExited={() => console.log("exist")}
      classNames={classNames}
    >
      {children}
    </CSSTransition>
  </TransitionGroup>
);

export const TransitionList = ({ list, timeout, classNames, children }) => (
  <TransitionGroup>
    {list.map(item => (
      <CSSTransition
        key={item.id}
        timeout={timeout}
        // onExited={() => console.log("exist")}
        classNames={classNames}
      >
        {() => children(item)}
      </CSSTransition>
    ))}
  </TransitionGroup>
);

//Usage
export const App = () => {
  const [animation, setAnimation] = React.useState(true);

  return (
    <>
      <List />

      <TransitionComponent
        timeout={300}
        classNames="title"
        isAnimated={animation}
      >
        <h1>animation test</h1>
      </TransitionComponent>
      <button onClick={() => setAnimation(prev => !prev)}>animation</button>
    </>
  );
};