CODEWITHSUNDEEP
javascripthtmlcsscss-animations
Player Mathinson
Player Mathinson

Reputation: 35

CSS animation not working in the menu button

Here is the code of my javascript.

function change(x) {
      if(!document.querySelector(".animate")){
      x.classList.add("animate");
      x.classList.remove("animater");
      }else{
      x.classList.remove("animate");
      x.classList.add("animater");
    }

Now the first time animation works but when i click it more than once it just shows the end state without animation. Animater contains three classes all working and so does animater.The div also passes the information correctly to function.

Here is the full code:

function change(x) {
  if (!document.querySelector(".animate")) {
    x.classList.add("animate");
    x.classList.remove("animater");
  } else {
    x.classList.remove("animate");
    x.classList.add("animater");
  }
}
body {
  background: #3FAF82;
  text-align: center;
}

.line1,
.line2,
.line3 {
  margin: 0px auto;
  margin-top: 10px;
  height: 5px;
  width: 80px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  transition: all ease 0.8s;
}

.lines {
  margin-top: 50px;
  cursor: pointer;
}

.animate .line3 {
  animation: change3 ease 1 0.8s forwards;
}

.animater .line3 {
  animation: change3 ease 1 0.8s forwards reverse;
}

.animate .line1 {
  animation: change1 ease 1 0.8s forwards;
}

.animater .line1 {
  animation: change1 ease 1 0.8s reverse forwards;
}

.animate .line2 {
  width: 0px;
}

.animater .line2 {
  width: 80px;
}

@keyframes change3 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -15px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0, -15px, 0) rotate(-45deg);
  }
}

@keyframes change1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(0);
    transform: translate3d(0, 15px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(45deg);
    transform: translate3d(0, 15px, 0) rotate(45deg);
  }
}


}
<div class="lines" onclick="change(this)">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

Upvotes: 3

Views: 179

Answers (2)

Temani Afif
Temani Afif

Reputation: 272590

The issue here is that you are using the same animation so by adding removing classes you don't change the animation, you simply change some properties of it so the animation won't run again.

To avoid this use 2 different animation.

function change(x) {
  if (!document.querySelector(".animate")) {
    x.classList.remove("animater");
    x.classList.add("animate");
  } else {
    x.classList.remove("animate");
    x.classList.add("animater");
  }
}
body {
  background: #3FAF82;
  text-align: center;
}

.line1,
.line2,
.line3 {
  margin: 0px auto;
  margin-top: 10px;
  height: 5px;
  width: 80px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  transition: all ease 0.8s;
}

.lines {
  margin-top: 50px;
  cursor: pointer;
}

.animate .line3 {
  animation: change3 ease 1 0.8s forwards;
}

.animater .line3 {
  animation: change3_rev ease 1 0.8s forwards;
}

.animate .line1 {
  animation: change1 ease 1 0.8s forwards;
}

.animater .line1 {
  animation: change1_rev ease 1 0.8s forwards;
}

.animate .line2 {
  width: 0px;
}

.animater .line2 {
  width: 80px;
}

@keyframes change3 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -15px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0, -15px, 0) rotate(-45deg);
  }
}
@keyframes change3_rev {
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -15px, 0) rotate(0deg);
  }
  0% {
    transform: translate3d(0, -15px, 0) rotate(-45deg);
  }
}

@keyframes change1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(0);
    transform: translate3d(0, 15px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(45deg);
    transform: translate3d(0, 15px, 0) rotate(45deg);
  }
}
@keyframes change1_rev {
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(0);
    transform: translate3d(0, 15px, 0) rotate(0);
  }
  0% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(45deg);
    transform: translate3d(0, 15px, 0) rotate(45deg);
  }
}


}
<div class="lines" onclick="change(this)">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

By the way you can simplify this by using only transition:

function change(x) {
  x.classList.toggle("animate");
}
body {
  background: #3FAF82;
  text-align: center;
}

.line1,
.line2,
.line3 {
  position: relative;
  margin: 0px auto;
  margin-top: 10px;
  height: 5px;
  width: 80px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  transition: width linear 0.8s, top 0.5s linear 0.5s, bottom 0.5s linear 0.5s, transform 0.5s linear;
}

.line1 {
  top: 0;
}

.line3 {
  bottom: 0;
}

.lines {
  margin-top: 50px;
  cursor: pointer;
}

.animate .line1,
.animate .line2,
.animate .line3 {
  transition: width linear 0.8s, top 0.5s linear, bottom 0.5s linear, transform 0.5s linear 0.5s;
}

.animate .line3 {
  bottom: 15px;
  transform: rotate(-45deg);
}

.animate .line1 {
  top: 15px;
  transform: rotate(45deg);
}

.animate .line2 {
  width: 0px;
}

.animater .line2 {
  width: 80px;
}
<div class="lines" onclick="change(this)">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

Upvotes: 2

Yehia Awad
Yehia Awad

Reputation: 2978

the class animater had css properties that was bothering the animation process

I have just removed the lines that adds and remove animater, I didn't see any purpose for this class in your code

That is the new codepen: https://codepen.io/anon/pen/wmqYpg

Upvotes: 0

Related Questions