Почему transition работает так нестабильно?

Question

[yavaskript]

Имеется вот такая вот поделка.
Нажимаешь на любую клавишу, и одна из панелей увеличивается-уменьшается, чтобы визуально себя выделить.
Проблема в том, что при первом нажатии анимация срабатывает правильно. Но потом начинает происходить нечто страшное и пугающее. А именно, анимация может "проигрываться" не до конца. Может останавливаться в какой-то момент (и панель остается не до конца увеличенной / уменьшенной). А может вообще ничего не произойти. А может "проигрываться" резким рывком.
Почему так происходит? И можно ли это исправить?

Comments

[Михаил]

эт что и зачем?

setInterval(() => {
    document.querySelector(`.${newPad}`).classList.remove("anim");
  }, 500);

[yavaskript]

Михаил, чтобы удалить класс, и панель уменьшилась до своих изначальных размеров

[Михаил]

yavaskript, каждые 500 мс ?

[yavaskript]

Михаил, по идее, через полсекунды, как класс добавился

[profesor08]

yavaskript, Замени setInterval на setTimeout

Answer 1

[WapSter]

Для таких целей нужно использовать событие transitionend, а не setInterval. По твоему сценарию скорее подойдет setTImeout. Но тоже могут возникнуть проблемы.

Answer 2

[profesor08]

В твоем примере плохо все. Даже если заменишь setInterval на setTimeout, тебе надо будет еще раз подождать 500мс, что закончилась анимация уменьшения. Значит появится вложенный setTimeout. Выглядит это так себе. Еще у тебя проблема в том, что ты не удаляешь класс у предыдущего элемента. Это значит, что нажав несколько раз подряд, класс будет удален только у последнего. Также тебе надо блокировать выполнение следующей анимации, пока не выполнится первая.

Транзиции по своему хороши, но конкретно в этом случае лучше использовать анимацию на @keyframes. Получишь больше контроля, не придется привязываться ко времени и что-то колхозить.