CODEWITHSUNDEEP
javascriptjquerycss-animationsanimate.css
Biker John
Biker John

Reputation: 2711

Animation glitches when function is triggered again before slideUp animation ends

I use the following script (along with external animate.css) which i call when I want to show a specific notification. The idea is simple; when triggered, animate - (slide in down) the notification box, along with changed notification message. When time is out, animate again (slide out up). Everything works fine, except for when i re-trigger notification function right at the time the previous call is animating out (between the timeout and start of slide up animation - see note in code).

// 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);
  });
}

Other code resources:

Animate.css for css animations https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

anim() function (from animate.css's github page)

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)
}

Upvotes: 0

Views: 85

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

If you want to prevent a concurring animation, you can check if the element already has the animated class.

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

Upvotes: 1

Related Questions