0

I created a pop-up with HTML, CSS & JavaScript. The pop-up is suppose to have a minimum of 3-seconds delay, however; I cannot seem to get the popup to open after the 3-second delay. Bellow is the code I wrote, I am sure it has an issue, but I am unable to find where it is.

function myFunction() {
  var element = document.getElementById('hamburger-button');
  var newElement = document.getElementById('hamburger-modal');
  if (element.classList.toggle('is-active')) {
    newElement.style.display = 'block';
  } else {
    newElement.style.display = 'none';
  }
}
#hamburger-modal {
  padding: 7.5px 30px 7.5px 20px;
  background-color: #000;
  height: 55px;
  width: 190px;
  color: #fff;
  border: none;
  border-radius: 5px;
  transition-delay: 3s;
}
<!-- the hamburger-button is a mobile nav button that once clicked, makes the pop-up appear -->

<div id="hamburger-modal" class="hamburger-modal-index">
  <p>Example Text</p>
  <a href="mailto:me@example.com">
    <p>me@example.com</p>
  </a>
</div>
JΛYDΞV
  • 8,532
  • 3
  • 51
  • 77
ah2140
  • 1
  • 2
  • 1
    The function `myFunction` is not getting called. – nick zoum Oct 07 '20 at 07:39
  • 1
    Transitions won't be called on `display` changes. Use `opacity` and `visibility` combined instead. – ssc-hrep3 Oct 07 '20 at 07:42
  • Transitions only really work for numeric values, eg, height or color. They won't work for display values of "block" or "none" Additionally, to trigger a transition you have to apply the css class to the element, which means that you have to have at least two classes for it - a "before" and "after" type of thing. You should also specify the entire transition you need - often, though, it's just `transition: all 3s ease-in-out` or something like that. So, create two classes, one for the original state and one for the transitioned state, add appropriate styling and swap the class in your code. – ATD Oct 07 '20 at 07:43
  • Here's a list of CSS properties that support transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties –  Oct 07 '20 at 07:43

0 Answers0