如何使用 CSS 和 Javascript 在我的菜单导航栏中添加 animation

Question

I want to add animation in to the height from 0% to 45% when clicked

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";
  }
});

i tried adding new class and put a height to 45% to show and put a classlist add and remove to the javascript but it didn't work

I also tried the transition height.7s linear but it didn't work

Answer 1

You can done this using CSS.

Head over to this link - https://css-tricks.com/using-css-transitions-auto-dimensions/

Also check this out - How can I transition height: 0; to height: auto; using CSS?

Hope this answers your question.

Answer 2

Try to implement using 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

Add this code snippet to your js code below the links.style.display=="block";

links.style.transition="3s";

Transitions always add an animation effect to elements onhover and onclick