过渡结束不触发答案

【问题标题】：Transition end does not fire过渡结束不触发
【发布时间】：2016-01-05 22:59:00
【问题描述】：

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

我创建原型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，我不知道。

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

【问题讨论】：

“快速”按钮确实有效，但您没有指定时间间隔，因此它会打开和隐藏而不向用户显示。设置时间间隔也将解决您指定的问题。你能澄清你的问题吗？您在这里有什么顾虑？
是的，但是在点击快速按钮后尝试选择一些文本。模态仍然存在，不透明度：0。之后您无法执行任何操作。

标签： javascript css css-transitions transition transitionend

【解决方案1】：

过渡应该在具有过渡属性的元素中：

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

【讨论】：

只需将 $(document) 替换为 $modal。没有变化。

【解决方案2】：

据我了解，transitionend 仅在动画的所有时间结束时触发。所以这就是为什么当我点击“慢”按钮模式时等待它完全出现然后隐藏一切都很好。

【讨论】：