使用 React Modal 平滑过渡答案

【问题标题】：Smooth transition with React Modal使用 React Modal 平滑过渡
【发布时间】：2021-11-01 07:37:21
【问题描述】：

我试图让 React modal 出现在屏幕上时有一个平滑的过渡，但似乎无法让 transition 属性做任何事情。现在，模态以一种不和谐的方式弹出到屏幕上，但我想让它慢慢淡入。这是我的模态样式：

const customStyles = {
content: {
  top: "50%",
  left: "50%",
  right: "auto",
  bottom: "auto",
  marginRight: "-50%",
  transform: "translate(-50%, -50%)",
  transition: "opacity .5s",
  width: "90%",
  maxHeight: "600px",
  overflow: "auto",
  padding: "40px",
  maxWidth: "500px",
  borderRadius: "10px",
  boxShadow: "0px 0px 15px 1px gray",
},
  };


  <Modal
        ariaHideApp={false}
        isOpen={modalIsOpen}
        onRequestClose={() => setIsOpen(false)}
        style={customStyles}
        contentLabel="Example Modal"
      >

大家有什么建议吗？

【问题讨论】：

标签： reactjs css-transitions react-modal

【解决方案1】：

我认为您需要将不透明度作为属性本身。

const customStyles = {
content: {
  top: "50%",
  left: "50%",
  right: "auto",
  bottom: "auto",
  marginRight: "-50%",
  transform: "translate(-50%, -50%)",
  opacity: "20%", 
  transition: ".5s",
  width: "90%",
  maxHeight: "600px",
  overflow: "auto",
  padding: "40px",
  maxWidth: "500px",
  borderRadius: "10px",
  boxShadow: "0px 0px 15px 1px gray",
},
  };

【讨论】：