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?

The "Fast" button actually works, but you do not specify interval so it opens and hides without showing to the user. Setting time interval will fix that as you specified as well. Could you clarify your question? What is your concern here? — , Dec 04 '15 at 10:19
Yes, but try to select some text after click Fast button. Modal is still there with opacity:0. You can not do any actions after. — uaNiktia, Dec 04 '15 at 14:04

score 0 · Answer 1 · answered Dec 04 '15 at 14:06

0

Transition should be in the element that have the transition property:

$('.modal').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function (e) {

Take a look more information

https://developer.mozilla.org/en-US/docs/Web/Events/transitionend

answered Dec 04 '15 at 14:06

Marcos Pérez Gude

21,869
4
38
69

Just replace $(document) to $modal. No changes. – uaNiktia Dec 04 '15 at 14:11

score 0 · Accepted Answer · answered Jan 05 '16 at 14:59

0

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.

answered Jan 05 '16 at 14:59

uaNiktia

55
6

Transition end does not fire

2 Answers2