每次點擊影片如何播放？

我只能播放一次影片，每次點擊都想播放。
我正在做一個類似谷歌恐龍的游戲。
影片處于暫停狀態，JavaScript 中的 onClick 函式確實將其播放。

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" class="macaco"></div> <!-- Macaco -->

我嘗試在最后添加一個事件，但不知道如何使用該屬性，因為我幾乎沒有閱讀它。閱讀切換，但也不知道在這種情況下如何使用它。

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

您需要擺脫infinite（您只想運行一次）。啟動影片后，您必須重置影片，以便它可以再次啟動：

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" class="macaco"></div> <!-- Macaco -->

uj5u.com熱心網友回復：

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 -->

標籤：javascripthtml动画

上一篇：如何在箱線圖中顯示PandasDataFrame的最后一行

下一篇：SwiftUI影片的范圍