Bootsrap 4: Disable button until modal animation is done

Question

I'm using a Bootstrap 4 modal to show a big navigation. To open the navigation I'm using a toggle button with a CSS animation. The animation changes a hamburger menu icon to an X.

The problem is, that if you click to fast and the modal animation isn't ready, the button gets confused and shows the X even at an already closed menu/modal.

Is there any way to disable the button until the modal animation is ready?

Here's my code:

$('.menu').click(function(){
   $('#burger').toggleClass('active');
});

I saw, that there is a way to listen to the modal animation:

$('#myModal').on('shown', function () {
  // do something… 
})

But I could not figure out how to implement it in my function.

Here's my actual code: https://codepen.io/cray_code/pen/JjjqRpN

Answer 1

You can just tie toggling of the burger to both show/hide modal events..

var toggleBurger = function () {
  $('#burger').toggleClass('active-sandwich');
}

$('#nav-modal').on('show.bs.modal', toggleBurger)
$('#nav-modal').on('hide.bs.modal', toggleBurger)

Demo

Answer 2

Well you could write it like this

$(document).ready(function(){
    var isShown = false;
    $('#nav-modal').on('shown.bs.modal', function(){
        isShown = false;
        $("#burger").css("display", "block");
    });

    if(!isShown)
    {
        $('#burger').on('click', function(){
            isShown = true;
            $("#burger").css("display", "none");
        });
    }

    $('#nav-modal').on('hidden.bs.modal', function () {
       isShown = false;
       $("#burger").css("display", "block");
    });

Sorry if the code kind of messy, but I hope you could understand what I mean. basically I only put some boolean to make sure its showing or not. After that I validate it. If isshown is false then you can't click until isshown true.