javascript - 过渡结束不触发

Question

我有一个想法，使用动画隐藏和显示方法创建模态窗口，并且我希望它能够与 CSS 过渡一起使用。

我创建原型(prototype)https://jsfiddle.net/7bkvcvqq/and一切看起来都很好，但是当我单击“快速”按钮时立即触发显示和隐藏时，事件 Transitionend 不会触发，模式窗口仍然在页面上。您可以检查这一点，只需尝试在单击快速按钮后用鼠标选择页面上的一些文本即可。

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
  }

}());

例如，在实际代码中，当我将此逻辑用于预加载器时，可能会发生这种情况。我发现的一种解决方案是在隐藏函数中使用setTimeout，但是在不同的计算机上setTimeout的延迟不同。也许这取决于CPU，我不知道。

为什么会发生这种情况以及如何防止这种情况？

Answer 1

过渡应该位于具有过渡属性的元素中:

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

查看更多信息

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