1

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

我创建了原型https://jsfiddle.net/7bkvcvqq/一切看起来都很好但是当我点击快速按钮时立即触发显示和隐藏时，事件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，我不知道。

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

4

2 回答 2

0

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

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

查看更多信息

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

于 2015-12-04T14:06:48.940 回答
0

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

于 2016-01-05T14:59:00.227 回答