How can I add a smooth transition effect to a navbar that appears and disappears with JavaScript?

I am trying to make a navbar appear and disappear with some JS when clicking on a button element. I managed to do that bit, but I would like to add a transition so that the navbar pops up smoothly. I am a bit confused and don't quite know where to start.

Sorry if my question is not well formulated.

This is my html bit

<section class="main-container">
<header class="main-header"></header>
<button class="displayer">Click Here</button>
</section>

My CSS

.main-container {
  width: 100vw;
  height: 100vh;
}
.main-header {
  width: 100%;
  height: 4em;
  background-color: black;

  position: absolute;
  top: 0;
}

And the bit of JS I wrote

const remover = document.querySelector(".displayer");

function vanish() {
  const navBar = document.querySelector(".main-header");
  const display = getComputedStyle(navBar).display;

  if (display === "none") {
    navBar.style.display = "block";
  } else {
    navBar.style.display = "none";
  }
}
remover.addEventListener("click", vanish);

You could use a transition and toggle a class that changes opacity and transform.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const remover = document.querySelector(".displayer");
function vanish() {
  const navBar = document.querySelector(".main-header");
  navBar.classList.toggle('show');
}
remover.addEventListener("click", vanish);

<!-- language: lang-css -->

.main-header {
  width: 100%;
  height: 4em;
  background-color: black;

  position: absolute;
  top: 0;
  transition: all .5s;
  transform: translateY(-100px);
  opacity: 0;
}

.main-header.show {
  transform: none;
  opacity: 1;
}

html,body{margin: 0}

<!-- language: lang-html -->

<header class="main-header show"></header> 
<button class="displayer" style="margin-top: 5em;">Click Here</button>

<!-- end snippet -->