第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React-modal 動畫在 Safari 中不起作用

React-modal 動畫在 Safari 中不起作用

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

1 回答

?
BIG陽

TA貢獻(xiàn)1859條經(jīng)驗 獲得超6個贊

有一種方法可以讓它發(fā)揮作用。我在 safari 中遇到了同樣的問題,但我所做的是設(shè)置一個本地狀態(tài),該狀態(tài)向我指示模式是否打開,并且我在 afterOpenModal 和 afterClose 中設(shè)置新狀態(tài),并將其放在 setTimeOut 內(nèi)。setTimeOut 強(qiáng)制重新加載 DOM 并識別動畫中的過渡。

我根據(jù)你的例子工作。


查看完整回答
反對 回復(fù) 2023-09-21
  • 1 回答
  • 0 關(guān)注
  • 122 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號