在JavaScript中显示模态转换不顺利

Question

我在应用程序中为一些弹出模式捏了一个我喜欢的css效果，但当在JS中的DOM中创建模式时，我遇到了一些问题。

当用户单击按钮以"打开"模态时，它应该平稳过渡，看起来大小在增加(按比例放大(。当它只是html和css时，它可以根据需要工作，但当它在我写的JS中的点击事件中时，模态会突然出现并消失(如果我使用"display:block"(，或者它非常不稳定，或者我根本无法使其工作(如果我用"visibility:visible"(。

我的感觉是，它并没有将其视为"过渡"，效果也不适用，或者我试图以某种方式过渡模糊的背景，而不是模态元素。

这是我的css。。。。。

.modal {
display: none; <-- added to flip between states, might be cause of problem
height: 100vh; 
width: 100%;
position: fixed;
top: 0;
left: 0; 
background-color: rgba($color-black, .8);
z-index: 999999;
opacity: .98; 
transition: all .3s;
@supports(-webkit-backdrop-filter: blur(10px)) or (backdrop-filter:blur(10px)){
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba($color-black, .3);
}
&__content {
@include absCenter; 
width: 75%; 
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, .2);
border-radius: 3px;
display: table; 
overflow: hidden;
opacity: 1; 
transform: translate(-50%, -50%) scale(1);
transition: all .5s .2s;
}

请原谅JS的(非常(伪代码，但实际的代码就像妈妈用来做的意大利面条。。。。。

dbRecord.forEach(el => {
const button = document.createElement('button')
button.innerHTML = <populate some html with db info>
button.addEventListener('click', (e) => {
modal.style.display = 'block' 
modal.innerHTML = <set attributes from parent element>
document.querySelector('.modalCloseButton').addEventListener('click') => {
modal.style.display = 'none'
}
...
}
}

我怎样才能使这种过渡平稳而不是突然？

Answer 1

我只通过一种方式完成了转换。也许这个代码示例可以帮助您使它以另一种方式工作。display不能有转换。将background和color设置为transparent。当您的转换时间为0.3s时，在0.3秒后将setTimeout设置为display: none。

var modal = document.querySelector('.modal');
var dbRecord = ['foo', 'bar']
dbRecord.forEach(el => {
var button = document.createElement('button');
button.innerHTML = 'populate some html with db info<br>' + el;
button.addEventListener('click', (e) => {
modal.querySelector('p').innerHTML = 'set attributes from parent element<br>' + el;
document.querySelector('.modalCloseButton').style.display = 'block';
modal.style.display = 'block';
modal.style.backgroundColor = 'rgba(0,0,0,.8)';
modal.style.color = 'white';
});
document.body.appendChild(button);
});
document.querySelector('.modalCloseButton').addEventListener('click', () => {
modal.style.backgroundColor = 'rgba(0,0,0,0)';
modal.style.color = 'transparent';
document.querySelector('.modalCloseButton').style.display = 'none';
setTimeout(() => {
modal.style.display = 'none';
}, 300)
});

.modal {
display: none;
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0);
z-index: 999999;
color: transparent;
transition: all .3s linear 0s;
}
.modalCloseButton {
display: none;
}

<div class="modal">
<p></p>
<button class="modalCloseButton">&times;</button>
</div>