Changing css transform in javascript doesn't trigger transition in Javascript

Question

I want to program a responsive navigation bar, so when the user clicks on the burger menu, the links of the navigation should move from right to left inside the website. In Javascript, I toggle the class "nav-active" of "nav ul". The "nav-active" class has the attribute "transform: translateX(0%);", which should position the element back to the website, but it doesn't.

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body>

      <!------------------------------------------------------------------------Top Navigation-->
      <nav class="navigation">
        <div class="logo">
          <img src="images/logodressler350.png" alt="Logo Image" width="250">
        </div>
        <ul class="nav-links">
          <li><a href="#">Startseite</a></li>
          <li><a href="#">lernraumdressler</a></li>
          <li><a href="#">Nachhilfe</a></li>
          <li><a href="#">Anfahrt</a></li>
          <li><a href="#">Kontakt</a></li>
        </ul>
        <div class="burger">
          <div class="line-1"></div>
          <div class="line-2"></div>
          <div class="line-3"></div>
        </div>
      </nav>
      <div class="green-line"></div>
      <script type="text/javascript" src="javascripts/navbar.js"></script>
  </body>
</html>

SCSS:

 .navigation{
  display: flex;
  min-height: 8vh;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 70%;
  }
  ul li{
    list-style: none;
    text-align: center;
  }
  ul li a{
    text-decoration: none;
    color: #333;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 18px;
  }
}
.dropdowncontent{
  display: none;
}
.burger{
  display: none;
  cursor: pointer;
  div{
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px;
    transition: all 0.3s ease;
  }
}
.green-line{
  background-color: lightgreen;
  width: 100%;
  height: 2px;
}
//------------------------------------------------------------------------------MEDIA
@media screen and (max-width: 968px){
  .navigation{
    ul{
      width: 80%;
    }
  }
}
@media screen and (max-width: 868px){
  body{
    //overflow-x: hidden;
  }
  .burger{
    display: block;
  }
  .navigation ul{
    position: absolute;
    right: 0;
    height: 92vh;
    top: 8vh;
    background-color: gray;
    display: flex;
    flex-direction: column; // x und y werden getauscht
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    li{
      opacity: 0;
    }
  }
}
//------------------------------------------------------------------------------Keyframes
/*wenn man clickt*/
.nav-active{
  transform: translateX(0%);
}
@keyframes navLinkFade{
  from{
    opacity: 0;
    transform: translateX(50px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line-1{
  transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line-2{
  opacity: 0;
}
.toggle .line-3{
  transform: rotate(45deg) translate(-5px, -6px);
}

JS:

const navSlide = () => {
  const burger = document.querySelector(".burger");
  var nav = document.querySelector(".navigation ul");
  const navLinks = document.querySelectorAll(".navigation ul li");

  burger.addEventListener("click", () => {
    // Toggle Nav
    nav.classList.toggle("nav-active");
    // Animate Links
    navLinks.forEach((link, index) => {
      if (link.style.animation){
        link.style.animation = "";
      } else{
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7}s`;
      }
    });
    // Burger Animation
    burger.classList.toggle("toggle");
  });
}
navSlide();

Here is the Demo https://jsfiddle.net/chinamarc/6r78a0e2/4/

You're not triggering a transition, instead you're triggering an animation. That's a diffrence. If you want to achieve a reverse animation, then you have to code one and append this animation to the menu, instead of just removing navLinkFade 0.5s ease forwards ${index / 7}s — Michael W. Czechowski
– Michael W. Czechowski, Commented Mar 15, 2019 at 15:18

iacobalin · Accepted Answer · 2019-03-15 15:25:23Z

1

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

//-----------------------------------------------Keyframes
/*wenn man clickt*/
.navigation .nav-active{
   transform: translateX(0%);
}

edited Mar 15, 2019 at 15:25

answered Mar 15, 2019 at 15:19

iacobalin

6083 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kaiido Over a year ago

Wow no I just meant you could have said that the problem was that .navigation ul has higher specificity than .nav-active, no need to quote the whole Mirriam-Webster

wjatscheslaw Over a year ago

thanks this works like charm but still doesn't understand why XD. im going o read your link

iacobalin Over a year ago

🙃 well it's easier to quote

iacobalin Over a year ago

Imagine a group of peoples, some of them having the same first name but different last names. If you shout their first name more then one might answer creating confusion. If you call them by their first name and last name you have a better chance getting the one you aim for.

wjatscheslaw Over a year ago

that explanation makes it easier to understand, thank you!

Collectives™ on Stack Overflow

Changing css transform in javascript doesn't trigger transition in Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related