CODEWITHSUNDEEP
javascriptcsscss-transitions
bevc
bevc

Reputation: 203

Displaying modal in JavaScript not transitioning smoothly

I pinched a css effect that I like for some popup modals in my application, but I'm having some 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').

My feeling is that it isn't viewing it as a 'transition' and the effect doesn't apply, or that I'm somehow trying to transition the blurred background rather than the modal element.

This is my 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;
  }

Please forgive the (very) pseudo code for the JS, but the actual code is spaghetti like mama used to make.....

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 transition smooth rather than abrupt?

Upvotes: 0

Views: 1040

Answers (1)

Antoni
Antoni

Reputation: 376

I got the transition working only one way. Maybe this code sample helps you to get it also working the other way. display can't have transitions. Set background and color to transparent. When your transition time is 0.3s make a setTimeout to set it to display: none after 0.3 seconds.

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>

Upvotes: 3

Related Questions