Transition end does not fire

Question

I have an idea to create modal window with animated hide and show method and I want that it works with CSS transition.

I create prototype https://jsfiddle.net/7bkvcvqq/and everything looks fine but when I trigger show and hide without delay when click Fast button the event transitionend does not fire and modal window still on the page. You can check this, just try to select by mouse some text on the page after Fast button click.

var modal = (function () {

  var $modal    = $('.modal'),
      openClass = 'modal_open',
      hide,
      show;

  hide = function () {
    // force a redraw/repaint
    $modal.height();

    $modal.removeClass(openClass);
  };

  show = function () {
    $modal.show();

    // force a redraw/repaint
    $modal.height();

    $modal.addClass(openClass);
  };

  $(document).on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function (e) {
    if ($modal.is(e.target) && !$modal.hasClass(openClass)) {
      $modal.hide();
    }
  });

  return {
    hide: hide,
    show: show
  }

}());

In real code this situation may happen when I use this logic for preloader for example. One solution which I found is to use setTimeout in hide function, but in different computers delay for setTimeout different. Maybe it depends from CPU, I don't know.

Why it is heppen and how prevent this?

Answer 1

As I understand, transitionend trigger only when all time for animation is going. So that's why when I click to 'Slow' button modal wait when it appears completely and then hide everything is fine.