Почему аниамция происходит только один раз?

Question

[Артём Лукичев]

Сделал слайдер на Jquery:
https://codepen.io/air_man6/full/QWLQzpJ
Но при клике на стрелочки анимация показывается только в первый раз. Как это пофиксить?

Comments

[cgwic]

Зачем так странно все делать? Сделайте анимацию на класс, и просто добавляйте его и потом удаляйте.
Либо можно сделать все через js будет не так громоздко, и посмотрите на cubic-bezier

Answer 1

[0xD34F]

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

$('.nextArrow, .backArrow').on('animationend', e => e.target.style.animation = '');

Comments

[Артём Лукичев]

спасибо, отмечу ваш ответ решением

Answer 2

[Enj0y]

Всё просто, анимацию надо снимать, проиграл и снял класс/стили, ловить окончание анимации можно с помощью JS эвентов animationend. Я бы ещё советовал нормально завернуть анимацию в класс, посмотрите как это сделано в библиотеках, например AnimateCSS