Question

我有一个想法，用动画隐藏和显示方法创建模态窗口，我希望它适用于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
  }

}());

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

为什么会出现这种情况？如何防止这种情况发生？

Answer 1

转换应该在具有transition属性的元素中：

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

了解更多信息

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

Answer 2

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

过渡端不会触发

2 个答案: