Smooth toggle Javascript function

Question

Well what I want to do is to toggle a menu when is clicked but it's not smooth and it feels tough, I'm a newbie in JS but I do know CSS and HTML well enough, so is there a way to smooth this toggle function?

menu unclicked:

menu clicked:

const toggleButton = document.getElementsByClassName("nav__toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav__links")[0];

toggleButton.addEventListener("click", () => {
    console.log("clicked");
    navbarLinks.classList.toggle("active");
    toggleButton.classList.toggle("open");
});

Answer 1

You can apply transition and transform properties to the element through CSS. For example, if you are using a drop down menu and controlling the slide and the opacity:

transform: translateY(-10px);
transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;

You could check out: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Answer 2

All you need is a transition and transform property that you can toggle. Transform CSS property is used for handling dimensions, orientation etc of a DOM element. Adding transition adds an effect where the transform properties if changed, change gradually.

const closeButton = document.getElementById("close")

closeButton.addEventListener("click", () => {
  const menu = document.getElementById("nav-links")

  menu.classList.toggle("closed-list");
})

ol {
  width: 100%;
  list-style-type: none;
  background: gray;
  transition: all 0.4s ease-in-out;
}

.closed-list {
  transform: scaleY(0);
  transform-origin: top;
}

li {
  text-align: center;
  padding: 12px 0px;
  color: white;
  font-weight: 700;
  font-size: 18px;
}

#close-container {
  text-align: right;
}

<div>
  <div id="close-container">
    <button id="close">
      open/close
    </button>
  </div>
  <ol id="nav-links">
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
  </ol>
</div>