Как на jQuery можно добавить класс к блоку после того, как анимация прошла полный цикл?

Question

Есть следующий блок (колесо) сразу с анимацией:

@keyframes new-wheel-shake-1 {
    0% {
        transform: rotate(-1040deg)
    }
    50% {
        transform: rotate(-1048deg)
    }
    100% {
        transform: rotate(-1040deg)
    }
}

.shake1 {
    animation: new-wheel-shake-1 2s ease-in-out infinite;
}

Тут сразу при загрузке страницы колесо вращается влево/вправо без остановки.

Мне при клике на кнопку нужно удалить класс .shake1 и добавить класс .rotate1, чтобы колесо начало крутиться:

@keyframes rotate {
    100% {
        transform: rotate(2160deg);
    }
}

.rotate1 {
    animation: rotate 4s ease-in-out forwards;
}

Но при добавлении класса происходит скачек, так как углы поворота колеса разные.

Можно ли как-то добавить класс .rotate1 после полного прохождения цикла .shake1, чтобы не было скачка?

Answer 1

События связанные с циклами анимаций подслушивает animationiteration.

Для пущей наглядности происходящего в первой анимации я поправил ваше сонное укачивание на больший размах углов.

const obj = document.getElementById('obj');
const yarrr = document.getElementById('btn');

function  resetShake (e) {
  obj.classList.remove('shake1');
  obj.classList.add('rotate1');
  obj.removeEventListener('animationiteration', resetShake, true);
}

btn.addEventListener('click', (e) => {
  obj.addEventListener('animationiteration', resetShake, true);
});

#obj {
  width: 42px;
  height: 42px;
  background-color: grey;
}

@keyframes new-wheel-shake-1 {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(10deg);
  }
}
.shake1 {
  animation: new-wheel-shake-1 5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(2160deg);
    }
}
.rotate1 {
    animation: rotate 4s ease-in-out forwards;
}

<div id="obj" class="shake1"></div>
<br>
<button id="btn">YARRR</button>

Думаю, что с "переводом" на язык jQuery справитесь сами.)

P.S. На будущее! Ознакомьтесь с правилами хорошего тона — "Как задать хороший вопрос?"

БЛОГ НА HUSL

Как на jQuery можно добавить класс к блоку после того, как анимация прошла полный цикл?

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