时间戳

首页 > 解决方案 > CSS 属性：“transition-delay: 3s”不起作用

javascript - CSS 属性：“transition-delay: 3s”不起作用

问题描述

我用 HTML、CSS 和 JavaScript 创建了一个弹出窗口。然而，弹出窗口应该有至少 3 秒的延迟；在 3 秒延迟后，我似乎无法打开弹出窗口。贝娄是我写的代码，我确定它有问题，但我找不到它在哪里。

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>

标签： javascripthtmlcsshamburger-menu

解决方案

推荐阅读