how to listen to the end of a bootstrap animation

Question

I\'m developing a website using bootstrap and its responsive JS+CSS.

At the top of the page I have a fixed navigation bar where an \"expand menu\" button is shown in

Answer 1

$target.on("shown.bs.collapse", function(event){    
    console.log("end of the animation");
});

---

Wonder that nobody mention about Util.emulateTransitionEnd() which was created on purpose and used by Bootstrap components to catch when the animation is over.

$('#nav')
  .one(
    'bsTransitionEnd', // Util.TRANSITION_END
    handler
  )
  .emulateTransitionEnd(600); // Collapse.TRANSITION_DURATION

In your particular case, you might want to extend corresponding Bootstrap plugin, so that you can figure out which exactly case is yours - Collapse is used by different components.

Here is jsfiddle snippet to demo (based on Bootstrap v4).

(function($) {
  var Collapse = $.fn.collapse.Constructor;
  var navbar = $('#nav');

  $.extend(Collapse.Default, {
    navbarClass: ''
  });

  var _show = Collapse.prototype.show;
  Collapse.prototype.show = function() {
    _show.apply(this, Array.prototype.slice.apply(arguments));

    var navbarClass = this._config.navbarClass;
    if (navbarClass && !navbar.hasClass(navbarClass)) {
      navbar.addClass(navbarClass);
    }
  }

  var _hide = Collapse.prototype.hide;
  Collapse.prototype.hide = function() {
    _hide.apply(this, Array.prototype.slice.apply(arguments));

    var navbarClass = this._config.navbarClass;
    if (navbarClass && navbar.hasClass(navbarClass)) {
      navbar
        .one('bsTransitionEnd', function() { // Util.TRANSITION_END
          navbar.removeClass(navbarClass);
        })
        .emulateTransitionEnd(300); // Collapse.TRANSITION_DURATION / 2
    }
  }
})(window.jQuery);

  
    Menu
    
  

  

    

      Link Home
      Link2
      Link3