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