Я реализовал решение из Этот поток , и он все еще работает только один раз.
Код:
const ButtonClickFunction = (e,id)=>{
e.preventDefault()
var el = document.querySelector(`.location-${id}`)
el.style.animation = '';
el.style.animation = "addition 1s";
}
Из того, что я могу сказать, каждый раз Я нажимаю кнопку, анимация элементов очищается, затем устанавливаю желаемую анимацию. Но, тем не менее, он работает только один раз, а затем никогда не работает снова. Я действительно надеялся сделать это с javascript, так как добавление класса, а затем его удаление просто кажется неуклюжим и не лучшей практикой. Я использую React в качестве фреймворка FE, если это имеет значение
edit: SOLUTION
var el = document.querySelector(`.location-${id}`)
el.style.animation = "addition 1s 3";
el.addEventListener('animationend', ()=>{
el.style.animation = ""
})
Как сказал один пользователь, браузер будет игнорировать спина к спине и просто оптимизировать для запуска этого финала вызов назначения. Чтобы обойти это, используйте EventListener для запуска «сброса» после завершения анимации.
Я по-прежнему придерживаюсь мнения, что добавление классов, удаление классов и использование setTimeout для «сброса» Анимация неуклюжа и неуклюжа. Это решение, состоящее всего из нескольких строк кода и не повреждающее удобство сопровождения при необходимости прокручивать бесконечное количество классов, если у вас есть много анимаций, которые должны запускать пользователи.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event