Как запускать и останавливать анимацию сss через js?

Question

у меня есть два css класса

anim-1 & anim-2 внутри них такой код

animation: animate-1 1s linear

через функцию

makeAnim() {

   eye.classList.add("anim-1");

}

в js я анимирую елемент в html.

Проблема в том, что анимация проигрывается при вызове функции только один раз, когда вешаю функцию на онклик например. если поставить infinite то одна анимация накладывается на другую.

вопрос: как сделать, чтобы при вызове одной функции запускалась анимация каждый раз по новой без перезагрузки страницы, а предыдущая анимация прерывалась, либо чтобы одна анимация ждала завершения другой. спасибо.

Answer 1

нашел событие .addEventListener("animationend", () => {

} )

которое позволяет отследить окончание анимации и убрать класс анимации с елемента

а еще можно сделать classList.toggle

Answer 2

Пример цикличного изменения анимации (Используя animationend):

window.currentAnim = 0

d.addEventListener('animationend', e => {
  window.currentAnim = window.currentAnim+1 > 2 ? 0 : window.currentAnim+1
  d.style.animationName = 'ani'+window.currentAnim
})

d.style.animationName = 'ani'+window.currentAnim

#d {
  width: 50px;
  height: 50px;
  animation: 1.66s 0s 1 linear both normal running;
}

@keyframes ani0 {
  50% {
    background: red;
  }
}

@keyframes ani1 {
  50% {
    background: green;
  }
}

@keyframes ani2 {
  50% {
    background: blue;
  }
}

<div id="d"></div>

Answer 3

Запускают и останавливают анимацию с помощью CSS-свойства animation-play-state: running или paused соответственно:

div{
    width: 300px;
    text-align: center;
    animation: progress 10s linear infinite;
}
@keyframes progress{
    from{transform: rotateZ(0deg);}
    to{transform: rotateZ(360deg);}
}

<div id=div>я вращаюсь</div>
<button onclick='div.style="animation-play-state: running"'> старт </button>
<button onclick='div.style="animation-play-state: paused"'> стоп </button>

Или второй вариант с таким кодом кнопок:

<button onclick='div.style.animation="progress 10s linear infinite"'> старт </button>
<button onclick='div.style.animation="progress 10s linear infinite paused"'> стоп </button>

БЛОГ НА HUSL

Как запускать и останавливать анимацию сss через js?

Ответы (3 шт):