How to play animation each time i click on it?-CodePudding

I just can play the animation once, and I want to play it every time when I click on it.
I'm doing a game like dinosaur of google.
The animation is on paused, and the onClick function from JavaScript does put it on the play.

var x = document.getElementById("macaco");

function saltar() {
  document.getElementById("macaco").style.WebkitAnimationPlayState = "running";
  document.getElementById("macaco").style.AnimationPlayState = "running";
}

#macaco {
  background-color     : orange;
  height               : 70px;
  width                : 40px;
  transform            : translateX(15vw);
  position             : absolute;
  bottom               : 22px;
  position             : absolute;
  animation            : linear saltar 1s infinite;
  animation-play-state : paused;
  }
@keyframes saltar {
    0% { transform: translatey(0px) translateX(15vw)    }
   50% { transform: translatey(-120px) translateX(15vw) }
  100% { transform: translatey(0px) translateX(15vw)    }
}

<div onclick="saltar()" id="macaco" ></div> <!-- Macaco -->

I tried with adding an event at the end, but don't know how to us the property because I barely read it. Read about toggle, but also don't know how to use it in this case.

CodePudding user response：

const el_macaco = document.getElementById("macaco");

el_macaco.addEventListener('click', saltar);

function saltar()
  {
  el_macaco.classList.toggle('doRun');
  }

#macaco {
  position             : absolute;
  bottom               : 22px;
  width                : 40px;
  height               : 70px;
  background-color     : orange;
  transform            : translateX(15vw);
  animation            : linear saltar 1s infinite;
  animation-play-state : paused;
  }
#macaco.doRun {
  animation-play-state : running;
  }
@keyframes saltar {
   0% { transform: translatey(   0px) translateX(15vw) }
  50% { transform: translatey(-120px) translateX(15vw) }
 100% { transform: translatey(   0px) translateX(15vw) }
 }

<div id="macaco"></div>

CodePudding user response：

You need to get rid of infinite (you only want to run it once). And you have to reset your animation once you have started it so that it can kick off again:

var x = document.getElementById("macaco");

document.addEventListener('animationend', (ev) => {

});

function saltar() {
  var ev = document.getElementById("macaco")
  ev.style.WebkitAnimationPlayState = "running";
  ev.style.AnimationPlayState = "running";
  ev.classList.remove("macaco")
  ev.offsetWidth
  ev.classList.add("macaco")
}

.macaco {
  background-color     : orange;
  height               : 70px;
  width                : 40px;
  transform            : translateX(15vw);
  position             : absolute;
  bottom               : 22px;
  position             : absolute;
  animation            : linear saltar 1s 1;
  animation-play-state : paused;
  }
@keyframes saltar {
    0% { transform: translatey(0px) translateX(15vw)    }
   50% { transform: translatey(-120px) translateX(15vw) }
  100% { transform: translatey(0px) translateX(15vw)    }
}

<div onclick="saltar()" id="macaco" ></div> <!-- Macaco -->

CodePudding user response：

var x = document.getElementById("macaco");

function removeClass() {
  x.classList.remove('run');
}

function saltar() {
  x.classList.add('run');
  setTimeout(removeClass,1000) //time should match with animation duration
}

#macaco {
  background-color     : orange;
  height               : 70px;
  width                : 40px;
  transform            : translateX(15vw);
  position             : absolute;
  bottom               : 22px;
  position             : absolute;
 }
 .run {
  animation: linear saltar 1s;
  animation-play-state: running;
  -webkit-animation: linear saltar 1s;
  -webkit-animation-play-state: running;
 }
@keyframes saltar {
    0% { transform: translatey(0px) translateX(15vw)    }
   50% { transform: translatey(-120px) translateX(15vw) }
  100% { transform: translatey(0px) translateX(15vw)    }
}

<div onclick="saltar()" id="macaco"></div> <!-- Macaco -->