Блог

Я реализую modal с помощью react-modal. При отображении модальной анимации установите переход в 1s, а затем измените непрозрачность с 0 на 1 с помощью css. С помощью этого я хочу реализовать анимацию, в которой модальная анимация отображается медленно.

Проблема в том, что эта анимация работает в 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>
  );
}
 

modal-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;
}
 

Есть способ заставить ее работать. У меня была такая же проблема в safari, но то, что я сделал, это установил локальное состояние, которое указывает мне, открыто ли модальное или нет, и я установил новое состояние в afterOpenModal и AfterClose, и я сделал это внутри setTimeout . setTimeout принудительно перезагружает DOM и распознает переход в анимации.

я работаю на основе вашего примера. Вот решение

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