javascript - 如何重新触发功能（翻译动画）

Question

我的动画功能只运行一次。我试过删除和添加类，以及运行一个动画结束函数来创建一个重新触发。但仍然没有运气。任何香草JS的想法？

CSS:
#element {
width: 10px; 
height: 10px; 
animation: "";

@keyframes movedown {
    100% {
        transform: translateY(10px);
    }
}

JS:
btn_button.onclick = () => {
    element.style.animation = "movedown 10s";
};

HTML: 
<div id="element"></div>

标签： javascriptcss

Answer 1

您可以使用 setTimeout设置element.style.animation为""。然后，您可以在单击按钮时再次添加动画名称。

let btn = document.querySelector("#btn");
btn.onclick = () => {
  element.style.animation = "movedown 2s";
  setTimeout(() => element.style.animation = "", 2000)
};

#element {
  width: 10px;
  height: 10px;
  background-color: red;
}

@keyframes movedown {
  100% {
    transform: translateY(50px);
  }
}

<div id="element"></div>
<button id="btn">Trigger</button>