ModalAnimated.module.css

.ModalAnimated {
  bottom: 0;
  left: 0;
  pointer-events: initial;
  position: absolute;
  right: 0;
  top: 0;
}
.ModalAnimated:global(.modal-enter) {
  opacity: 0;
  transform: translateY(100px) scale(0.9);
}
.ModalAnimated:global(.modal-enter-active) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: all cubic-bezier(0, 0, 0.2, 1) 300ms;
}
.ModalAnimated:global(.modal-exit) {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ModalAnimated:global(.modal-exit-active) {
  opacity: 0;
  transform: translateY(-100px) scale(0.9);
  transition: all cubic-bezier(0, 0, 0.2, 1) 300ms;
}
@media screen and (prefers-reduced-motion: reduce) {
  .ModalAnimated:global(.modal-enter-active) {
    transition: none;
  }
  .ModalAnimated:global(.modal-exit-active) {
    transition: none;
  }
}

ModalAnimated.tsx

import React from "react";
import { CSSTransition } from "react-transition-group";
import classes from "./ModalAnimated.module.css";
import ModalPortal from "./ModalPortal";
import ModalView from "./ModalView";
import useEchap from "./useEchap";

type ViewComponentType = React.FunctionComponent<{
  children: React.ReactNode,
  onClose: () => void,
}>;

interface Props {
  active: boolean;
  children: React.ReactNode;
  onClose: () => void;
  view?: ViewComponentType;
}

const ModalAnimated: React.FC<Props> = ({
  active,
  children,
  onClose,
  view: ViewComponent = ModalView,
}) => {
  useEscape(active, onClose);

  return (
    <CSSTransition in={active} timeout={300} classNames="modal">
      <ModalPortal active={active}>
        <div className={classes.ModalAnimated}>
          <ViewComponent onClose={onClose}>{children}</ViewComponent>
        </div>
      </ModalPortal>
    </CSSTransition>
  );
};

export default ModalAnimated;