[bevc]

This is a css question that I think I vaguely know what the problem is, but I'm not sure of a solution. Stackoverflow didn't help.

I have a css effect that I nabbed for some popup modals in my application, but I'm having trouble when the modal(s) are created in the DOM in JS.

When the user clicks on the button to 'open' the modal, it should transition smoothly, appearing to grow in size (scaling up). When it's just html and css this works as desired, however when it's on a click event in JS that I've written, the modal just abruptly appears and disappears (if I use 'display: block'), or it's super-jerky or I can't make it work at all (if I use 'visibility: visible').

I'm pretty sure that it's because I'm using 'display' and that the transition doesn't apply (I'm just flipping a switch on and off). However, it doesn't seem to work with the 'visibility' property either.

This is my css (sass).....

Code

.modal {
 display: none; <-- added to flip between displaying on click

 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;
 }

and this is some pseudo-code to demonstrate my JS.....

Code

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'
        }
        ...
 }
}

How can I make this a smooth transition in the css? Anyone know? I think I somehow need to do this with the 'visibility' property instead, but I'm buggered if I know how.

[devlightz]

Why are you creating new modals in the DOM rather than just using one modal shell and interjecting different elements into it?

[bevc]

Why are you creating new modals in the DOM rather than just using one modal shell and interjecting different elements into it?

I can't remember, I do remember that it took me fugging ages and this was the only way I was able to get it to work, so refactoring it (and then spending several days sobbing because I've broken it) is waaaaaaay down on my to-do list!