CSS прозрачность перехода работает от 0 до 1, но не работает от 1 до 0

Question

моя непрозрачность перехода работает только от 0 до 1. Что мне делать для от 1 до 0? Если я наберу transition: all .3s ease-in-out;, он работает, но на этот раз возникает проблема с изменением размера. Что я должен делать? Кроме того, я могу сделать остановку анимации при изменении размера экрана в javascript, но есть ли простой способ сделать это всего за CSS?

Вот код:

const body = document.body;
const hamburger = document.getElementById("hamburger");
const menu = document.getElementById("menu");
const links = document.querySelectorAll(".menu li");

hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("clicked");
    menu.classList.toggle("active");
    body.classList.toggle("no-scroll");

    links.forEach(link => {
        link.addEventListener("click", () => {
            body.classList.remove("no-scroll");
            hamburger.classList.remove("clicked");
            menu.classList.remove("active");
        });
    });
});

.menu {
  position: absolute;
  background: $purpleGradient;
  //transform: translateY(-100%);
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-in-out;
}

// Menu Active
.active {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s ease-in-out;
}

<header class="header">
  <nav class="flex flex-ai-center flex-jc-sb container">
    <div class="logo">
      <a href="">LOGO</a>
    </div>
    <ul class="menu flex flex-fd-column flex-jc-center flex-ai-center" id="menu">
      <li><a href="">Home</a></li>
      <li><a href="">Pricing</a></li>
      <li><a href="">Investments</a></li>
      <li><a href="">Support</a></li>
    </ul>
    <div class="hamburger flex flex-ai-center flex-jc-center" id="hamburger">
      <span></span>
    </div>
  </nav>
</header>

Answer 1

Мне не удалось найти гамбургер в результате, поэтому я добавил текст, чтобы его можно было увидеть.
Когда я щелкнул по нему, меню показывалось поверх гамбургера и не позволяло мне нажимать на нем для части затухания. Поэтому я добавил left:120px.
Также для эффекта затухания удалите свойство visibility в классах,

const body = document.body;
const hamburger = document.getElementById("hamburger");
const menu = document.getElementById("menu");
const links = document.querySelectorAll(".menu li");

hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("clicked");
    menu.classList.toggle("active");
    body.classList.toggle("no-scroll");

    links.forEach(link => {
        link.addEventListener("click", () => {
            body.classList.remove("no-scroll");
            hamburger.classList.remove("clicked");
            menu.classList.remove("active");
        });
    });
});

.menu {
        position: absolute;
        background: $purpleGradient;
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 120px;
        z-index: 99;
        opacity: 0;

        transition: opacity .3s ease-in-out;

}

.active {

        opacity: 1;
        transition: opacity .3s ease-in-out;
}

<header class="header">
        <nav class="flex flex-ai-center flex-jc-sb container">
            <div class="logo">
                <a href="">LOGO</a>
            </div>
            <ul
                class="menu flex flex-fd-column flex-jc-center flex-ai-center"
                id="menu"
            >
                <li><a href="">Home</a></li>
                <li><a href="">Pricing</a></li>
                <li><a href="">Investments</a></li>
                <li><a href="">Support</a></li>
            </ul>
            <div
                class="hamburger flex flex-ai-center flex-jc-center"
                id="hamburger"
            >
                <span>Hamburger</span>
            </div>
        </nav>
    </header>