Javascript 如何在React中的关闭模式上添加转换，以及在模式外单击时如何关闭？

我知道有很多问题。我已经检查过了，但仍然找不到解决问题的方法。我不得不问这个问题，因为我被卡住了，哪儿也动不了。我是一名新的学习者，仍然是React的初学者，并且尝试在我的项目中实现情态动词。这里有两个问题

如何在结束时添加过渡

一旦用户点击卡片，我就会显示带有转换的模式，但当用户关闭时，由于某种原因，我无法应用转换

我更改了打开或关闭模式的方法，并使用以下代码在css中进行转换：

.show .modal-parent {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }

  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }   

每当用户单击卡片时，我将显示

。显示
类并在
模式父项上应用转换，所有模式内容都位于该位置。现在我想在用户关闭模式时做同样的事情

单击“外部”时如何关闭模式
App.js文件位于此处：

import React from "react";
import "./App.css";
import Cards from "./components/Cards/cards.js";
import users from "./employees.json";
import Navbar from "./components/Navbar";
import Modals from "./components/Modals";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      open: false,
    };
    this.nextPerson = this.nextPerson.bind(this);
  }

  userIndex = (cardIndex) => {
    this.setState({
      index: cardIndex,
      open: true,
    });
  };

  nextPerson = () => {
    this.setState({
      index: this.state.index + 1,
    });
  };
  previousPerson = () => {
    this.setState({
      index: this.state.index - 1,
    });
  };
  close = () => {
      this.setState({
        open: false,
      });

  };
  render() {
    let person = users[this.state.index];

    return (
      <div className="container">
        <Navbar />
        <div className="team-text"><p> Our team of <span className="team-number">42</span> strategists, designers, engineers, developers and managers<br/>make custom products for startups and leading companies. </p> </div>
        <div className="top-card">
          {users.map((user) => {
            return (
              <Cards
                user={user}
                users={users}
                key={user.id}
                userIndex={this.userIndex}
              />
            );
          })}
          <Modals
            open={this.state.open}
            users={users}
          >
            <div class="modal-parent">
              <div className={`modal-nav ${person.department === "Engineering" ? "engineer" : ""} ${person.department === "Business" ? "business" : ""}${person.department === "Design" ? "design" : ""}`}>
                <div className="modal-close">
                  <a
                    href="#close"
                    title="Close"
                    className="close"
                    type="button"
                    onClick={this.close}
                  >
                    Close
                  </a>
                </div>{" "}
              </div>

              <div className="modal-image">
                <img src={person.avatar} alt="" class="modal-avatar"></img>{" "}
              </div>
              <div> </div>
              <div className="modal-info">
                <h1 className="modal-name">
                  {person.firstName} {person.lastName}
                </h1>
                <h5 className="modal-title">{person.jobTitle}</h5>
                <h5 className="modal-department">{person.department}</h5>
              </div>
              <div className="modal-bio">
                <p>{person.bio}</p>
              </div>
              <div className="modal-contacts">
                <a href={`mailto: ${person.contact.phone}`}>
                  <span className={`material-icons phone ${person.department === "Engineering" ? "engineer" : ""} ${person.department === "Business" ? "business" : ""}${person.department === "Design" ? "design" : ""}`}>call</span><span className="contact-text">{person.contact.phone}</span>
                </a>{" "}
                <a href={`mailto: ${person.contact.email}`}>
                  <span className={`material-icons email ${person.department === "Engineering" ? "engineer" : ""} ${person.department === "Business" ? "business" : ""}${person.department === "Design" ? "design" : ""}`}>email</span><span className="contact-text">{person.contact.email}</span>
                </a>{" "}
                <a href={person.contact.url}>
                  <span className={`material-icons computer ${person.department === "Engineering" ? "engineer" : ""} ${person.department === "Business" ? "business" : ""}${person.department === "Design" ? "design" : ""}`}>computer</span><span className="contact-text">{person.contact.url}</span>
                </a>{" "}
              </div>
              <div className="modal-previous-btn">
                <button
                  className="previous-button"
                  onClick={this.previousPerson}
                  disabled={this.state.index <= 0 ? true : false}
                >Previous
                </button>
              </div>
              <div className={`modal-next-btn ${person.department === "Engineering" ? "engineer" : ""} ${person.department === "Business" ? "business" : ""}${person.department === "Design" ? "design" : ""}`}>
                <button
                  className="next-button"
                  onClick={this.nextPerson}
                  disabled={this.state.index >= 41 ? true : false}
                >Next
                </button>
              </div>
            </div>
          </Modals>
        </div>
      </div>
    );
  }
}

export default App;



从“React”导入React；
导入“/App.css”；
从“/components/Cards/Cards.js”导入卡片；
从“/employees.json”导入用户；
从“/components/Navbar”导入导航栏；
从“/components/Modals”导入模态；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
索引：0，
开：错，
};
this.nextPerson=this.nextPerson.bind（this）；
}
userIndex=（cardIndex）=>{
这是我的国家({
索引：cardIndex，
开放：是的，
});
};
下一个人=（）=>{
这是我的国家({
索引：this.state.index+1，
});
};
上一个人=（）=>{
这是我的国家({
索引：this.state.index-1，
});
};
关闭=（）=>{
这是我的国家({
开：错，
});
};
render（）{
让person=users[this.state.index]；
返回(
我们由42名策略师、设计师、工程师、开发人员和经理组成的团队为初创公司和领先公司定制产品。

{users.map（（用户）=>{
返回(
);
})}
{" "}
{" "}
{person.firstName}{person.lastName}
{person.jobTitle}
{个人部门}
{person.bio}

{" "}
{" "}
{" "}
下一个
);
}
}
导出默认应用程序；
要在单击外部时关闭模态，必须修改模态组件。首先，在开头创建一个ref：

modalRef = React.createRef();

然后在渲染函数中使用该ref：

return (
  <div ref={this.modalRef}...

然后测试单击是否在处理程序中的ref之外：

// Mouse click event, if outside of the popup then close it
handleMouseDown= (event) => {
    if (!this.modalRef.current.contains(event.target)) {
      // Notify the parent with a callback to hide the modal
    };
}

我正在到达那里，但还没有，当我像你说的那样做时，我会在卡被点击后立即隐藏模态本身。我甚至看不到模态内容。你应该console.log（this.modalRef.current）来确保它是模态包装器，而不是模态内部的东西。如果modalRef是模态内部子元素的引用，那么在我尝试
document.querySelector（“.Modal parent”）.getElementsByClassName.visibility=“hidden”之前，单击该子元素外部（仍在模态中）将关闭它不起作用的if条件内部。现在，我在if语句中调用了closing函数作为
handleMouseDown=（event）=>{if（！this.modalRef.current.contains（event.target））{this.close（）}；}
，现在一切正常。谢谢你的回答！
// Mouse click event, if outside of the popup then close it
handleMouseDown= (event) => {
    if (!this.modalRef.current.contains(event.target)) {
      // Notify the parent with a callback to hide the modal
    };
}