анимация открытия и закрытия навигации только в javascript и css

Question

у меня есть кнопка, чтобы открыть меню, нажмите кнопку, содержимое которой отображается быстро, а фон двигается медленно. Мой html код здесь

function navOpen() {
  let navi = document.getElementById("Nav");

  if (getComputedStyle(navi, null).display === "none") {
    navi.style.display = "block";
  } else {
    navi.style.display = "none";
  }
}

.nav {
  min-height: 1.125rem;
  max-height: auto;
  padding: 1rem;
  margin-top: 2.5rem;
  display: none;
  animation: mymove 1s infinite;
  background: rgb(167, 165, 165);
}

@keyframes mymove {
  from {
    height: 0;
  }
  to {
    height: 3.125rem
  }
}

<button class="navbutton" onclick="navOpen()">Menu</button>
<nav class="nav" id="Nav">
  <div class="nav_cls" id="nav-btn-cls">
    <a href="#" onclick="navigationClose()">
      <img class="navigation__close_button" src="/images/close.svg" alt="close">
    </a>
  </div>
  <ul class="nav_y">
    <li>
      <a class="navlinks" href="#">
        <span>Home </span>
      </a>
    </li>
  </ul>
</nav>

здесь я пытаюсь оживить использование css, но содержимое меню отображается быстро, а фоновый цвет отображается медленно и мерзко, как создать меню открывать и закрывать анимацию с помощью css и javascript

Answer 1

Попробуйте это.

function navOpen() {
  let navi = document.getElementById("Nav");

  if (!navi.classList.contains("colps-active")) {
      navi.classList.add("colps-active");
  }
}

function navigationClose() {
  let navicls = document.getElementById("Nav");

  if (navicls.classList.contains("colps-active")) {
      navicls.classList.remove("colps-active");
  }
}

.colps {
  transform-origin: top;
  height: 0;
  opacity: 0;
  transform: scale(1, 0);
  transition: 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.colps-active {
  transform: scale(1, 1);
  opacity: 1;
  height: auto;
}

.nav {
  padding: 1rem;
  margin-top: 2.5rem;
  background: rgb(167, 165, 165);
}

<button class="navbutton" onclick="navOpen()">Menu</button>
<nav class="nav colps" id="Nav">
  <div class="nav_cls" id="nav-btn-cls">
    <a href="#" onclick="navigationClose()">
      <img class="navigation__close_button" src="/images/close.svg" alt="close">
    </a>
  </div>
  <ul class="nav_y">
    <li>
      <a class="navlinks" href="#">
        <span>Home </span>
      </a>
    </li>
  </ul>
</nav>