反应模式 animation 在 Safari 中不起作用

Question

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

问题是这个 animation 适用于 chrome、firfox，但不适用于 safari。 激活 animation 有两个时序。 打开模式的那一刻和关闭它的那一刻。 animation 在 safari 关闭时工作，但 animation 在打开时似乎不起作用。

有解决方案吗？

下面的 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 中遇到了同样的问题，但我所做的是设置一个本地 state，它向我指示模态是否打开，我设置了新的 Z9ED39E2EA931586B6A985A6942EF573E 和 aftersetTimeOut. setTimeOut 强制重新加载 DOM 并识别 animation 中的转换。

我根据你的例子工作。 这是解决方案

https://codesandbox.io/s/react-modal-animation-forked-20ee3