Методы проверки того, завершился ли CSS-переход или анимация в JavaScript

Чтобы проверить, завершился ли переход CSS в JavaScript, вы можете использовать несколько методов. Вот несколько вариантов:

  1. Использование события transitionend: переходы CSS вызывают событие transitionendпо завершении. Вы можете прослушать это событие на интересующем вас элементе и выполнить желаемое действие. Вот пример:
var element = document.getElementById('your-element');
function transitionEnded(event) {
  // Perform your action here
}
element.addEventListener('transitionend', transitionEnded);
  1. Использование события animationend. Если вы используете CSS-анимацию вместо переходов, вы можете использовать событие animationendаналогичным образом. Он срабатывает после завершения анимации:
var element = document.getElementById('your-element');
function animationEnded(event) {
  // Perform your action here
}
element.addEventListener('animationend', animationEnded);
  1. Использование тайм-аута. Если вы знаете продолжительность перехода или анимации, вы можете установить тайм-аут, чтобы вызвать желаемое действие по истечении этого времени. Этот метод менее надежен, чем использование событий, но может работать в определенных сценариях:
var element = document.getElementById('your-element');
function transitionEnded() {
  // Perform your action here
}
setTimeout(transitionEnded, 1000); // Replace 1000 with the duration in milliseconds

Не забудьте заменить 'your-element'фактическим идентификатором или ссылкой на элемент, который вы хотите проверить.