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;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）