反應模式 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