javascript - 如何重置 CSS 动画，使其每次仅使用 Javascript 运行

Question

我已经从这个线程实现了解决方案，它仍然只运行一次。

代码：

    const ButtonClickFunction = (e,id)=>{
    e.preventDefault()
    var el = document.querySelector(`.location-${id}`)

    el.style.animation = '';
    el.style.animation = "addition 1s";

}

据我所知，每次单击按钮时，元素动画都会被清除，然后设置为我想要的动画。但是，它仍然只运行一次，然后就再也不会工作了。我真的希望只使用 javascript 来做到这一点，因为添加一个类然后将其删除似乎很笨重，而不是最佳实践。如果这很重要，我正在使用 React 作为 FE 框架

编辑：解决方案

    var el = document.querySelector(`.location-${id}`)

    el.style.animation = "addition 1s 3";

    el.addEventListener('animationend', ()=>{
        el.style.animation = ""
    })

正如一位用户所说，浏览器将忽略背靠背的分配，只是优化以运行最终的分配调用。要解决此问题，请在动画结束后使用事件监听器触发“重置”。

我仍然认为添加类、删除类和使用 setTimeout 来“重置”动画既笨拙又笨拙。这个解决方案只是几行代码，并且不会影响可维护性，必须滚动无休止如果您希望用户触发许多动画，则需要大量的类。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

标签： javascriptcssreactjscss-animations