如何让 JavaScript CSS animation 运行多次？

Question

我有一些运行 CSS animation 的 JavaScript 代码。它工作正常，但我需要刷新浏览器才能让它再次运行。 如何修改我的代码以使其在每次单击按钮时运行？

下面是我使用的代码。

JavaScript

document.getElementById('LogoContainer').addEventListener('click',function() {
    var c = document.getElementsByClassName('logo-rec');
    for (var i = 0; i < c.length; i++) {
        c[i].classList.add('logo-animate');
    }
})

HTML

<button id="LogoContainer">
    <div class="logo-rec"></div>
</button>

CSS

.logo-animate {
    animation-name: MoveLeft;
    animation-duration: 3s;
}

@keyframes MoveLeft {
      0% { transform: translatex(0px)   }
     50% { transform: translatex(-15px) }
    100% { transform: translatex(35px)  }
}

Answer 1

问题是，一旦 animation 运行，系统就会认为 - 我已经运行了它，所以当您单击它时它不会再次运行（animation 名称保持不变）。

因此，此代码段为 animationend 事件添加了一个事件侦听器，当发生这种情况时，它会删除导致 animation 的 class 设置，因此当您再次单击时，它是一个新的 class 设置，并且 animation 会再次发生。

 document.getElementById('LogoContainer').addEventListener('click', function() { var c = document.getElementsByClassName('logo-rec'); for (var i = 0; i < c.length; i++) { c[i].classList.add('logo-animate'); c[i].addEventListener('animationend', function() { this.classList.remove('logo-animate'); }); } })

 .logo-animate { animation-name: MoveLeft; animation-duration: 3s; } @keyframes MoveLeft { 0% { transform: translatex(0px) } 50% { transform: translatex(-15px) } 100% { transform: translatex(35px) } }

 <button id="LogoContainer"> <div class="logo-rec">abcd</div> </button>