我正在用react-modal 實現模態。顯示模態時,將過渡設置為 1s,然后使用 css 將不透明度從 0 更改為 1。有了這個,我想實現一個動畫,其中模式緩慢顯示。問題是這個動畫在 chrome、firfox 中有效,但在 safari 中無效。動畫被激活的時間有兩個。打開模式的那一刻和關閉模式的那一刻。在 safari 中,動畫在關閉時起作用,但在打開時動畫似乎不起作用。有解決辦法嗎?下面的 URL 是由開發人員編寫的,這正是我想要做的。嘗試在 Safari 中打開它。https://codesandbox.io/s/react-modal-animation-p2qnw?from-embed模態窗口.jsimport 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;}
React-modal 動畫在 Safari 中不起作用
眼眸繁星
2023-09-21 16:19:13