我有一個模式，它在按下按鈕時出現，并在顯示時顯示影片。
這作業正常，但只有當按下按鈕時模態代碼已經在 DOM 中。
您可以在此處查看示例： https ://codesandbox.io/s/loving-dan-7fwrkr
這就是問題所在：如果按鈕將模態代碼添加到 DOM，那么模態只會出現而沒有影片。
我花了很多時間嘗試各種方法來完成這項作業，我能想到的最好方法是在模態代碼添加到 DOM 后 200 毫秒使用 window.setTimeout 觸發影片。我不喜歡這樣的解決方案，因為它看起來像一個 hack——我不明白為什么這樣的 hack 會起作用。
下面的示例演示了這兩種情況。
沒有注釋代碼，影片就可以作業。
使用注釋代碼，模態只是出現而沒有影片。
如果有人知道如何解決這個問題，將不勝感激。
我的具體目標是在按下按鈕使其出現之前在 DOM 中沒有模式代碼。
我已經非常努力地制作了下面可能的最小示例，但我道歉仍然相當大。如果您建議在仍然相關的情況下進一步削減它，請告訴我。
import ReactDOM from 'react-dom';
import React, {useState} from 'react';
const theStyle = `
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
height: auto;
z-index: 2000;
visibility: hidden;
transform: translateX(-50%) translateY(-50%);
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(143, 27, 15, 0.8);
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-content {
color: #fff;
background: #e74c3c;
position: relative;
border-radius: 3px;
margin: 0 auto;
}
.md-content h3 {
opacity: 0.8;
}
.md-effect-1 .md-content {
transform: scale(0.7);
opacity: 0;
transition: all 0.3s;
}
.md-show.md-effect-1 .md-content {
transform: scale(1);
opacity: 1;
}
`
function App() {
const [getVisible, setVisible] = useState(false);
/*
THE MODAL APPEAR ANIMATION DOES NOT WORK WHEN THIS IS UNCOMMENTED
if (!getVisible) {
return (
<button onClick={() => setVisible(true)}>
show modal
</button>)
}
*/
return (
<>
<style>
{theStyle}
</style>
<div className={`md-modal md-effect-1 ${(getVisible) && "md-show"}`}>
<div className="md-content">
This is a modal window.<br/>
<button onClick={() => setVisible(false)} className="md-close">close</button>
</div>
</div>
<div onClick={() => setVisible(false)} className="md-overlay"/>
<button onClick={() => setVisible(true)} className="md-trigger">
show modal
</button>
</>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
uj5u.com熱心網友回復：
我遇到過類似的問題，原因是當您將模態添加到 DOM 時，transition如果模態立即變得可見，則不會觸發。end value
我通過將過渡放入@keyframes影片來解決它。然后，在將 modal 添加到 DOM 之后，您可以使用它classList.add()來觸發影片。
像這樣的東西
.modal {
opacity:0
}
.animated {
animation: showModal 1s forwards easeOut
}
@keyframes showModal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
將modal添加到DOM后的JS：
myModel.classList.add("animated")
uj5u.com熱心網友回復：
自我回答我未來的自己。
以@Kokodoko 的回答作為我的起點，我對影片在 CSS/JS 中的作業方式有了更好的理解，并完全重寫了我的模態，所以它現在可以滿足我的需求。
這是代碼：
import ReactDOM from 'react-dom';
import React, {useState} from 'react';
const theStyle = `
.animated {
animation: showModal .2s forwards
}
@keyframes showModal {
from {
opacity: 0;
transform: scale(0.7);
}
to {
opacity: 1;
transform: scale(1);
}
}
.modalOverlay {
z-index: 1500;
background: rgba(40,91,218,0.5); /* you must use this and not opacity because opacity changes the front color */
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: center;
}
.modalContainer {
z-index: 1600;
order: 0;
flex: 0 1 auto;
align-self: auto;
}
#modalContent {
z-index: 1700;
opacity: 0;
color: #fff;
width: 500px;
height: 200px;
background: #e74c3c;
position: relative;
border-radius: 3px;
margin: 0 auto;
}
`
function Button() {
const [getVisible, setVisible] = useState(false);
return (
<div>
<button onClick={() => setVisible(true)}>
show modal
</button>
{(getVisible) && <Modal setVisible={setVisible}/>}
</div>
)
}
function Modal({setVisible}) {
React.useEffect(
//() => window.setTimeout(document.getElementById("modalContent").classList.add("animated"))
() => document.getElementById("modalContent").classList.add("animated")
, [])
const handleClickOnOverlay = (e) => {
// clicks on the are sent through to the background so we must prevent that
e.stopPropagation()
setVisible(false)
}
const handleClickOnContainer = (e) => {
// clicks on the modal are sent through to the background so we must prevent that
e.stopPropagation()
}
const handleClickOnModal = (e) => {
console.log('clicked on modal')
}
return (
<>
<style>
{theStyle}
</style>
<div onClick={handleClickOnOverlay} className="modalOverlay">
<div className={`modalContainer`} onClick={handleClickOnContainer}>
<div id="modalContent" onClick={handleClickOnModal}>
This is a modal window.<br/>
<button onClick={() => setVisible(false)} className="md-close">close</button>
</div>
</div>
</div>
</>
);
}
ReactDOM.render(<Button/>, document.getElementById('root'));
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/459667.html