reactjs - CSSTransition（react-transition-group），React Portal Modal 没有动画

Question

在尝试为我的模态弹出窗口设置动画时，我没有使用 CSS 过渡获得动画。模态显示但没有动画。的命名和选择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,
  features,
  onExit,
  demoGif,
  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;

项目列表项.js

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

export default function ProjectListItem({
  projectName,
  features,
  demoGif,
}) {
  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;
}