过渡端不点火

Question

我有一个用动画隐藏和显示方法创建模式窗口的想法，我希望它能与CSS转换一起工作。

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

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

Answer 2

据我所知，只有当动画的所有时间都在进行时，转换才会触发。所以这就是为什么当我点击"慢"按钮时，模式等待它完全出现，然后隐藏一切都很好。