CSSTransition (react-transition-group), React Portal Modal 没有动画

如何解决CSSTransition (react-transition-group), React Portal Modal 没有动画

尝试为我的模态弹出窗口设置动画时，我没有使用 CSS Transitions 获得动画。模态显示但没有动画。 classnames 的命名和选择是正确的，但仍然没有动画。我认为使用 React Portal 并将其安装到 DOM 是问题的一部分，但我不确定确切的问题在哪里。

ProjectModal.js

import React from "react";
import ReactDOM from "react-dom";
import styles from "./ProjectModal.module.css";
import ExitIcon from "../../assets/ExitIcon.svg";
import transitions from "./ModalTransitions.module.css";
import { CSSTransition } from "react-transition-group";

const Backdrop = ({ onConfirm }) => {
  return <div className={styles.Backdrop} onClick={onConfirm} />;
};

const ModalOverlay = ({ title,features,onExit,demoGif,enabled }) => {
  return (
    <CSSTransition
      in={enabled}
      unmountOnExit
      classNames={{
        enter: transitions.enter,enterActive: transitions.enterActive,exit: transitions.exit,exitActive: transitions.exitActive,}}
    >
      <div className={styles.Modal}>
        <button onClick={onExit}>
          <img src={ExitIcon} alt="exit modal" />
        </button>
        <h3>{title}</h3>
        {demoGif && <img src={demoGif} alt="Loading..." />}
        <h4 className={styles.FeatureTitle}>Features</h4>
        {features && (
          <ul>
            {features.map((item) => {
              return (
                <li>
                  <p>{item}</p>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </CSSTransition>
  );
};

const ProjectModal = ({
  onConfirm,title,enabled,}) => {
  return (
    <React.Fragment>
      {ReactDOM.createPortal(
        <Backdrop onConfirm={onConfirm} />,document.getElementById("backdrop-root")
      )}
      {ReactDOM.createPortal(
        <ModalOverlay
          title={title}
          features={features}
          onExit={onExit}
          demoGif={demoGif}
          enabled={enabled}
        />,document.getElementById("modal-root")
      )}
    </React.Fragment>
  );
};

export default ProjectModal;

ProjectListItem.js

import React,{ useState } from "react";
import styles from "./ProjectListItem.module.css";
import ProjectModal from "../../../UI/ProjectModal/ProjectModal";

export default function ProjectListItem({
  projectName,}) {
  const [showProjectModal,setShowProjectModal] = useState();

  const projectModalHandler = () => {
    setShowProjectModal(null);
  };

  const enableProjectModalHandler = () => {
    setShowProjectModal(true);
  };

  const onExitHandler = () => {
    setShowProjectModal(null);
  };

  return (
    <React.Fragment>
      {showProjectModal && (
        <ProjectModal
          onConfirm={projectModalHandler}
          title={projectName}
          features={features}
          onExit={onExitHandler}
          demoGif={demoGif}
          enabled={showProjectModal}
        />
      )}
      <div
        className={styles.ProjectListItem}
        data-aos="slide-right"
        data-aos-once="true"
        onClick={enableProjectModalHandler}
      >
        <li>
          <h4>{projectName}</h4>
        </li>
      </div>
    </React.Fragment>
  );
}

ModalTransitions.module.css

.enter {
  opacity: 0;
}

.enterActive {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.exit {
  opacity: 1;
}

.exitActive {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}