I came across a cool CSS effect that I really like for some popup modals in my application, but I'm encountering difficulties when the modal(s) are dynamically created in the DOM using JavaScript.
When the user triggers the button to 'open' the modal, it should smoothly transition, appearing to scale up in size. Everything works as intended when using just HTML and CSS, but when triggered by a click event in my JS code, the modal suddenly appears and disappears (if I set 'display: block'), or it's very choppy, or sometimes it doesn't work at all (if I use 'visibility: visible').
I have a hunch that perhaps it's not recognizing it as a 'transition', or maybe I am mistakenly trying to animate the blurred background instead of the modal itself.
This is the snippet of my CSS related to the modal:
.modal {
display: none; <-- added to toggle states, might be causing the issue
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;
}
Apologies for the messy JavaScript pseudo-code, but the actual implementation is as tangled as spaghetti...
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'
}
// Other actions...
}
}
How can I achieve a smooth transition for the modal rather than an abrupt change?