Как дождаться окончания transition

Question

Есть вёрстка - https://mihinov.github.io/news/
При клике на меню, выходит оверлей, в котором есть календарик

Если нажать на крестик, то меню начнёт закрываться. Если во время закрытия пролистнуть вниз, то оверлей сожмётся, из-за того, что я сделал скрытие хедера при пролистывании вниз.

Я хотел бы сделать слушатель на окончание transition, но он вместо окончания анимация, срабатывает сразу в начале, при клике.

До того, как transition ещё не закончился document.body нельзя скроллить, после того, как сработало нужное событие, можно скроллить.
Я так сделал:

function showMessage() {
    console.log(1); // тут нужный код
}
header__burger.addEventListener("transitionend", showMessage());

Как это работает: при каждом закрытии заново объявляется функция showMessage(), и задаётся слушатель с новой созданной функцией. Но проблема в том, что transitionend срабатывает сразу при закрытии. Как сделать так, чтобы transitionend срабатывал только при окончании анимации?

срабатывает, потому что вы сразу функцию вызываете — ThisMan, Dec 12 '19 at 10:28
header__burger.addEventListener("transitionend", showMessage) — ThisMan, Dec 12 '19 at 10:28
плохо понимаю, как это всё работает. Я сделал так: header__burger.addEventListener("transitionend", () => { showMessage(); }); Но таким образом сообщение выводится 4 раза(походу это все окончания transition) + сообщения увеличиваются в арифметической прогресси, потому что так я не могу удалить слушатель — Михаил Камахин, Dec 12 '19 at 10:34
а вы точно на тот элемент обработчик вешаете? Надо тот, на котором непосредственно transition — ThisMan, Dec 12 '19 at 10:35
@ThisMan Да, этому элементу я задаю отступ и на него кликаю — Михаил Камахин, Dec 12 '19 at 10:37
Я нашёл ресурс https://developer.mozilla.org/ru/docs/Web/Events/transitionend , тут можно получать определённое свойство propertyName анимации, только я не понимаю как — Михаил Камахин, Dec 12 '19 at 10:38
Does this answer your question? Как куда-нибудь передать функцию // почему событие вызывается сразу же? — , Dec 22 '19 at 15:40
@РустамГимранов ответ я уже найден — Михаил Камахин, Dec 22 '19 at 16:57

score 0 · Accepted Answer · answered Dec 12 '19 at 10:46

Нужно было не вызывать функцию при объявлении слушателя. А также нужно было удалять слушатель, после того, как сработал слушатель.

function showMessage() {
    console.log(1);
    header__burger.removeEventListener("transitionend", showMessage);
}
header__burger.addEventListener("transitionend", showMessage);

Как дождаться окончания transition

1 Answers1