时间戳

首页 > 解决方案 > 如何使用 CSS 和 Javascript 在我的菜单导航栏中添加动画

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

问题描述

我想在单击时将动画添加到从 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 但它不起作用

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

标签： javascripthtmlcss

解决方案

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

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

还要检查一下 -我如何转换高度：0；到高度：自动；使用 CSS？

希望这能回答你的问题。

推荐阅读