如何使用 CSS 和 Javascript 在我的菜单导航栏中添加动画答案

【问题标题】：How to add animation in my menu navbar usng CSS and Javascript如何使用 CSS 和 Javascript 在我的菜单导航栏中添加动画
【发布时间】：2020-08-10 11:47:36
【问题描述】：

我想在点击时将动画添加到从 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";
  }
});

我尝试添加新类并将高度设置为 45% 以显示并将类列表添加和删除到 javascript 但它不起作用

我也尝试了过渡高度 .7s 线性，但没有用

【问题讨论】：

请向我们展示您尝试过但不起作用的代码。

标签： javascript html css

【解决方案1】：

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

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

也看看这个 - How can I transition height: 0; to height: auto; using CSS?

希望这能回答你的问题。

【讨论】：

【解决方案2】：

尝试使用 setInterval() 函数来实现。它将采用两个参数 i) 函数名 ii) 时间（以毫秒为单位）然后在 js 代码中创建该函数并设置元素的位置，最后当元素到达最终位置时使用 clearInterval() 函数停止元素的进一步动画

【讨论】：

【解决方案3】：

将此代码sn-p添加到links.style.display=="block";下方的js代码中

links.style.transition="3s";

过渡总是为元素 onhover 和 onclick 添加动画效果

【讨论】：