Можно ли проверить через JS/jQuery выполняется ли сейчас на элементе transition/animation?

Question

[Вадим Белкин]

Есть ли возможность узнать, происходит ли в нужный момент анимация или плавный переход какого-либо css-параметра нужного объекта? Например, при добавление класса ative у элемента происходит переход фонового цвета в течение 0.5 секунды, и нужно определить закончилась уже анимация или переход или ещё нет.

Answer 1

[Евгений Петров]

Есть такие события transitionend и animationend.

Comments

[Вадим Белкин]

Мне не нужно знать закончилась анимация или нет. Мне нужно узнать, есть ли она в момент вызова функции

[Евгений Петров]

@BelkinVadim а мне не нужно знать, нужно ли вам знать, что закончилась анимация или нет. Навешиваете обработчик на событие и точно знаете, закончилась ли анимация.

[Виталий Киренков]

@Petroveg Чисто ваше мнение. Если требуется отловить процесс анимации, то стоит ли переплетать ксс и жс или лучше сразу всё делать жс-ом?

[Евгений Петров]

@DeLaVega что значит «всё делать жс-ом»? Я навешиваю на элемент обработчик окончания анимации. Других путей нет.
Возможно, это — чисто моё мнение, но в чём состоит ваше?

[Виталий Киренков]

@Petroveg Пример. Нужно плавно отобразить первый элемент и по завершении отобразить второй.
Можно сделать fadeIn первого и на колбэк fadeIn второго - первый вариант решения. (только js)
Через транзишн в ксс менять опасити, из js отлавливать его завершение и потом докидывать второй класс, чтобы проанимировать второй элемент. То есть нужно переплетать и ксс и жс.

Лично я сторонник первого варианта, а вы как думаете? Это я имел ввиду.

[Евгений Петров]

@DeLaVega можно с помощью обработчика запускать другое действие, а можно в CSS задать transition-delay для следующей анимации.

[Виталий Киренков]

@Petroveg А если очередь на анимацию большая? То выстраивать это на задержках как то не совсем верно я думаю, ибо это поддерживать не совсем удобно, хотя и анимация будет плавнее и меньше нагружать пользователя

[Евгений Петров]

@DeLaVega для разговора нужно понимать — какова задача и каковы причины её решать.
Если я сам управляю анимацией, то почему я не могу ей управлять?
Если анимация не моя, то зачем мне вмешиваться или каковы причины ожидать её завершения?

[Вадим Белкин]

Элементу могут добавляться определённые классы, которые изменяют внешний вид через анимацию или плавный переход. Переход или анимация могут длиться от 0.5 сек. до 2 сек. Нужно чтобы в момент анимации нельзя было добавить другой класс (и не добавлять его по transitionend, если есть анимация - то ничего не происходит по событию, если нет - то происходит. Можно конечно наличие классов отвечающих за анимацию проверять, но их нужно в js прописывать, при добавление нового класса нужно было бы их вписывать

[Евгений Петров]

Для вашей ситуации нужно на таких элементах отслеживать и transitionend, и animationend, и состояние с помощью MutationObserver.
Флаг или attributes, или attributeFilter.

[Вадим Белкин]

Спасибо за помощь.