平滑切换 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 将过渡和变换属性应用于元素。例如，如果您使用下拉菜单并控制幻灯片和不透明度：

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

您可以查看： https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Answer 2

如果你想用 CSS 解决这个问题，你可以 'animate' 两个带有过渡的 div 属性: https://www.w3schools.com/css/css3_transitions.asp

关闭状态：

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

打开状态：

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

两名未成年人：

不要使用 BEM classes 来触发事件侦听器，而是使用适当的 class（js-click 或其他..）
前两行的小重构：

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

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>

平滑切换 Javascript 函数

Smooth toggle Javascript function

html

javascript

css

frontend

visual-web-developer