@yavaskript

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

Имеется вот такая вот поделка.
Нажимаешь на любую клавишу, и одна из панелей увеличивается-уменьшается, чтобы визуально себя выделить.
Проблема в том, что при первом нажатии анимация срабатывает правильно. Но потом начинает происходить нечто страшное и пугающее. А именно, анимация может "проигрываться" не до конца. Может останавливаться в какой-то момент (и панель остается не до конца увеличенной / уменьшенной). А может вообще ничего не произойти. А может "проигрываться" резким рывком.
Почему так происходит? И можно ли это исправить?
  • Вопрос задан
  • 215 просмотров
Решения вопроса 2
wapster92
@wapster92 Куратор тега CSS
Для таких целей нужно использовать событие transitionend, а не setInterval. По твоему сценарию скорее подойдет setTImeout. Но тоже могут возникнуть проблемы.
Ответ написан
Комментировать
profesor08
@profesor08 Куратор тега CSS
В твоем примере плохо все. Даже если заменишь setInterval на setTimeout, тебе надо будет еще раз подождать 500мс, что закончилась анимация уменьшения. Значит появится вложенный setTimeout. Выглядит это так себе. Еще у тебя проблема в том, что ты не удаляешь класс у предыдущего элемента. Это значит, что нажав несколько раз подряд, класс будет удален только у последнего. Также тебе надо блокировать выполнение следующей анимации, пока не выполнится первая.

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

Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы