Как запускать анимацию каждый раз при нажатии?

Question

[DonTraffic]

Есть какая либо анимация и блок к которому она должна применяется. При каждом нажатии на кнопку, срабатывает анимация. Я пытался присвоить просто через jQuery

$('.block').css('animation', 'animName 1s ease 1');

Но так она срабатывает лишь при первом нажатии, а на второе не реагирует

Answer 1

[Виталий Першин]

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

Comments

[Игорь Луговской]

box.addEventListener("animationend", func);

Открытие для меня, вчера пол дня гуглил не мог найти решение как сделать что бы анимация повторно запускалась - а сегодня чудо - нашёл!

Благодарю Человек!)

Answer 2

[mahmudchon]

Вы можете задать анимацию для блока с определенным классом. И при нажатии на кнопку присваивать блоку этот класс, возможно на время.

Comments

[Иван Вишневский]

Всё правильно. Нужно ставить анимацию в keyframes, прописывать к классу и применять этот класс к элементу. Ещё стоит на время анимации отклонять нажатия на кнопку, чтобы не создавать лишние таймауты.

Answer 3

[Андрей Глазачев]

1) В css создаете класс (например animate-me)
2) на него навешиваете Вашу анимацию

.animate-me {
animation: animName 1s ease;
}

3) Вешаем событие на клик

$(document).ready(function () {
    $(".block").click(function () {
        $(this).toggleClass('animate-me');
    });    
});