平滑切换 Javascript 功能

Question

好吧，我想做的是点击时切换菜单，但它不平滑，感觉很难，我是 JS 新手，但我对 CSS 和 HTML 足够了解，所以有没有办法平滑这个切换功能？

未单击的菜单：

单击的菜单：

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

如果你想用CSS解决这个问题，你可以使用transitions属性对两个div进行“动画”处理： https ://www.w3schools.com/css/css3_transitions.asp

关闭状态：

div {
  opacity: 0;
  transition: opacity 1s;
}

打开状态：

div.active {
  opacity: 1;
  transition: opacity 1s;
}

两个未成年人：

1. 不要使用 BEM 类来触发事件侦听器，而是使用适当的类（js-click 或其他东西..）

2. 前两行的小重构：

const [toggleButton] = document.querySelectorAll(".nav__toggle-button")
const [navbarLinks] = document.querySelectorAll(".nav__links")

Answer 2

您可以通过 CSS 将过渡和变换属性应用于元素。
例如，如果您使用下拉菜单并控制幻灯片和不透明度：

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

您可以查看：
https://developer.mozilla.org/en-US/docs/网页/CSS/过渡

Answer 3

您所需要的只是一个可以切换的过渡和变换属性。 Transform CSS 属性用于处理 DOM 元素的尺寸、方向等。添加过渡会增加变换属性如果更改则逐渐变化的效果。

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>