过渡结束不触发

Question

我想用动画隐藏和显示方法创建模态 window，我希望它能与 CSS 过渡一起使用。

我创建了原型 https://jsfiddle.net/7bkvcvqq/and 一切看起来都很好，但是当我点击快速按钮时立即触发显示和隐藏时，事件转换结束不会触发并且模式 window 仍在页面上。您可以检查一下，只需单击“快速”按钮后尝试通过鼠标 select 页面上的一些文本。

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

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

过渡结束不触发

Transition end does not fire

javascript

css

css-transitions

transition

transitionend