Я использую следующий скрипт (вместе с внешним animate.css), который я вызываю, когда хочу показать конкретное уведомление. Идея проста; при срабатывании анимировать - (сдвиньте вниз) окно уведомления вместе с измененным сообщением уведомления. Когда время выйдет, снова анимируйте (сдвиньте вверх). Все работает нормально, за исключением случаев, когда я повторно запускаю функцию уведомления прямо во время анимации предыдущего вызова (между тайм-аутом и началом анимации скольжения - см. примечание в коде).
// notification
var timer = '';
var notif = $('#notif');
var notif_txt = $('#notif #notif_txt');
var notif_orig = '#notif';
function err_notif (text = 'Prišlo je do napake!') {
clearTimeout(timer);
notif[0].style.display = 'none';
notif_txt.text(text);
notif[0].style.display = 'inline-block';
anim(notif_orig, 'slideInDown', function() {
timer = setTimeout(function(){
// if user re-triggers the notif () function in time between mark 1 and 2, it glitches out the notification system
// mark 1
anim(notif_orig, 'slideOutUp', function(){
// mark 2
notif[0].style.display = 'none';
});
}, 1500);
});
}
Другие ресурсы кода:
Animate.css для CSS-анимации https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
anim() функция (со страницы github animate.css)
function anim(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)
function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function') callback()
}
node.addEventListener('animationend', handleAnimationEnd)
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Если вы хотите не допустить одновременной анимации, вы можете проверить, имеет ли элемент уже класс animated.
if (document.querySelector(notif_orig).classList.contains("animated")){
console.info("Concurrent animation prevented.")
}else{
anim(notif_orig, 'slideInDown', function() {
//...
}
Пока идет анимация... К элементу добавляется класс
animated. Он удаляется в конце анимации. Таким образом, вы можете использовать это, чтобы заблокировать дополнительный вызовanim().