如何使用 CSS 和 Javascript 在我的菜單導航欄中添加 animation

Question

我想在單擊時將 animation 添加到 0% 到 45% 的高度

HTML：

<header id="header">
  <div class="contact">
    <ul>
      <li><i class="fas fa-phone"> (914) 296-0044</i></li>
      <li>Address</li>
    </ul>
  </div>
  <div class="header-navigation">
    <ul class="links">
      <li><a href="#">HOME</a></li>
      <li><a href="#">PAINTING</a></li>
      <li><a href="#">POWER WASHING</a></li>
      <li><a href="#">LIGHT FIXTURE REPLACEMNET</a></li>
      <li><a href="#">PLUMBING FIXTURE REPLACEMENT</a></li>
    </ul>
    <i class="fa fa-bars linkShow"></i>
  </div>
</header>

CSS：

.linkShow {
    display: block;
    position: absolute;
    right: 50%;
    top: 15%;
  }

  .links {
    display: none;
    width: 100%;
    height: 0%;
    text-align: center;
    background: var(--secondaryColor);
    position: relative;
    margin-top: 250px;
    transition: all 0.7s linear;
  }

  .links a {
    display: block;
    padding: 0 140px;
    transition: 0.5s ease-in-out;
  }
  .links a:hover {
    background: var(--mainColor);
    color: black;
  }
  .links li {
    width: 100%;
  }

Javascript：

const links = document.querySelector(".links");
const button = document.querySelector(".linkShow");

button.addEventListener("click", function () {
  if (links.style.display === "block") {
    links.style.display = "none";
  } else {
    links.style.display = "block";
  }
});

我嘗試添加新的 class 並將高度設置為 45% 以顯示並將類列表添加和刪除到 javascript 但它不起作用

我也嘗試了過渡 height.7s 線性，但沒有用

Answer 1

您可以使用 CSS 完成此操作。

前往此鏈接 - https://css-tricks.com/using-css-transitions-auto-dimensions/

還要檢查一下 - 我如何轉換高度：0； 到高度：自動； 使用 CSS？

希望這能回答你的問題。

Answer 2

嘗試使用 setInterval() function 來實現。 It will take two parameters i) function name ii) time in milliseconds Then create that function in js code and set the position of your element and at last when element reaches to final position use clearInterval() function to stop further animation of element

Answer 3

將此代碼段添加到您的 js 代碼中links.style.display=="block";下方

links.style.transition="3s";

過渡總是為元素 onhover 和 onclick 添加 animation 效果