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>