CODEWITHSUNDEEP
javascriptcsscss-transitions
nameless
nameless

Reputation: 59

How to animate or use transitions on a message pop up with javascript and css?

I currently have the message displaying and disappearing as I want but the transition isn't working, This is what I tried. 

const alertMsg = document.querySelector('.alert');
contactForm.addEventListener('submit', formSubmitted);


function formSubmitted(e) {
  //other stuff

  alertMsg.style.display = 'block';
  setTimeout(() => {
    alertMsg.style.display = 'none';
  }, 5000);
}
.alert {
  transition: all 0.5s ease-out;
}
<div class="alert">Your message has been sent, I will get back to you as soon as possible.</div>

The message just instantly disappears and reappears, how can I use the transition currently to make some sort of animation?

This is my first question so sorry if I missed any information out, I will add any more if needed. Thanks

Upvotes: 0

Views: 2027

Answers (1)

Scott
Scott

Reputation: 21892

You can't transition (or animate) the display property. the display property is either on or off there's nothing to transition or animate.

What you can do is animate opacity and alter the display property at start and end.

something like:

@keyframes showBlock {
    from { display: block; opacity: 0; }
    to { opacity: 1; }
}

@keyframes hideBlock {
   from { opacity: 1; }
   to { opacity: 0; display: none; }
}

Upvotes: 3

Related Questions