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

ModalWindow.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>
  );
}

模态-style.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 并识别动画中的过渡。

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

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

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

React-modal animation doesn't work in Safari

html

javascript

css

reactjs

react-modal