React-modal 动画在 Safari 中不起作用

Question

我正在用react-modal 实现模态。显示模态时，将过渡设置为 1s，然后使用 css 将不透明度从 0 更改为 1。有了这个，我想实现一个动画，其中模式缓慢显示。

问题是这个动画在 chrome、firfox 中有效，但在 safari 中无效。动画被激活的时间有两个。打开模式的那一刻和关闭模式的那一刻。在 safari 中，动画在关闭时起作用，但在打开时动画似乎不起作用。

有解决办法吗？

下面的 URL 是由开发人员编写的，这正是我想要做的。尝试在 Safari 中打开它。
https://codesandbox.io/s/react-modal-animation-p2qnw?from-embed

模态窗口.js

import React from "react";

import Modal from "react-modal";

import "../assets/css/modal-style.css";

Modal.setAppElement("#root");

export default function ModalWindow(props) {

  const [modalIsOpen, setIsOpen] = React.useState(false);

  return (

    <div>

      <div onClick={() => setIsOpen(true)}>Click</div>

      <Modal

        isOpen={modalIsOpen}

        onRequestClose={() => setIsOpen(false)}

        overlayClassName={{

          base: "overlay-base",

          afterOpen: "overlay-after",

          beforeClose: "overlay-before",

        }}

        className={{

          base: "content-base",

          afterOpen: "content-after",

          beforeClose: "content-before",

        }}

        closeTimeoutMS={1000}

      >

        <div>Message</div>

      </Modal>

    </div>

  );

}

模态样式.css

.overlay-base {

  position: fixed;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

  background-color: #000000;

  opacity: 0;

  transition: 1s;

}

.overlay-after {

  opacity: 1;

}

.overlay-before {

  opacity: 0;

}

.content-base {

  width: 480px;

  height: 320px;

  background-color: #ffffff;

  opacity: 0;

  transition: 1s;

}

.content-after {

  opacity: 1;

}

.content-before {

  opacity: 0;

}

Answer 1

有一种方法可以让它发挥作用。我在 safari 中遇到了同样的问题，但我所做的是设置一个本地状态，该状态向我指示模式是否打开，并且我在 afterOpenModal 和 afterClose 中设置新状态，并将其放在 setTimeOut 内。setTimeOut 强制重新加载 DOM 并识别动画中的过渡。我根据你的例子工作。