Глюки анимации, когда функция запускается снова до окончания анимации slideUp

Я использую следующий скрипт (вместе с внешним 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)
}

Пока идет анимация... К элементу добавляется класс animated. Он удаляется в конце анимации. Таким образом, вы можете использовать это, чтобы заблокировать дополнительный вызов anim().

Louys Patrice Bessette 20.03.2019 14:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
40
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите не допустить одновременной анимации, вы можете проверить, имеет ли элемент уже класс animated.

if (document.querySelector(notif_orig).classList.contains("animated")){
  console.info("Concurrent animation prevented.")
}else{
  anim(notif_orig, 'slideInDown', function() {
  //...
}

Другие вопросы по теме