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 Czechowski

iacobalin iacobalin · Accepted Answer · 2019-03-15T15:19:18

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

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

1 Answers