0

I tried to make a smooth transition on my toggleClass navbar, but css transition won't work. Anyone can help?

HTML (Jonathan Suh Hamburger's Menu)

function openNav() {
  hamburger.classList.add("is-active");
  document.getElementById("popUpNav").style.display = "block";
  document.getElementById('wrapper').style.display = "none";
}

function closeNav() {
  hamburger.classList.remove("is-active");
  document.getElementById("popUpNav").style.display = "none";
  document.getElementById('wrapper').style.display = "block";
}

var hamburger = document.querySelector(".hamburger");
hamburger.addEventListener('click', () => hamburger.classList.contains('is-active') ? closeNav() : openNav());
closeNav();
#popUpNav.menu {
  width: 550px;
  margin: 0 auto;
  position: absolute;
  z-index: -999;
  overflow: visible;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
<div class="hamburger hamburger--elastic" style="float:right;">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

<div id="popUpNav" class="menu" onclick="closeNav()">

  <a href="#">
    <h2>January 2020 On Analytics: Tahun Baru, Data Baru <i class="em em-partying_face" aria-role="presentation" aria-label="FACE WITH PARTY HORN AND PARTY HAT"></i></h2>
  </a>
  
  <a href="#">
    <h2>Februari 2020 On Analytics: CDN Cloudflare & 2.35K Returned Users</h2>
  </a>
  
  <a href="#">
    <h2>March 2020 On Analytics: Adsense </h2>
  </a>
  
  <div class="footer-nav">
    <i class="em em-email" aria-role="presentation" aria-label="ENVELOPE"></i> <b><u>it@gmail.com</u></b></a>
  </div>
</div>
Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63
Jericho
  • 71
  • 2
  • 8
  • 1
    Ideally you should include a [mcve] -- otherwise, we are both looking at content we don't need and missing context that we _do_ need to understand the problem... – Alexander Nied Mar 04 '20 at 16:18
  • 1
    Running this snippet gives a JS error `Uncaught TypeError: Cannot read property 'style' of null` because there is no `getElementById('wrapper')` – Jeremy Thille Mar 04 '20 at 16:19
  • 1
    Here's something that works: https://jsfiddle.net/khrismuc/wht0L1v7/ (I had to fix the code though, so we cannot reproduce your issue). –  Mar 04 '20 at 16:21

0 Answers0