$.closeModal 关闭异常

[chang0022]

该BUG #238 反馈过。我遇到相似的问题，并进行了进一步的调试。

• 相关问题代码：

  $.closeModal = function() {
  $(".weui-mask--visible").removeClass("weui-mask--visible").transitionEnd(function() {
    $(this).remove();
  });
  $(".weui-dialog--visible").removeClass("weui-dialog--visible").transitionEnd(function() {
    $(this).remove();
  });
  };

• 运行环境：Chrome 57，jquery < 1.11.0 jquery-weui 0.8.3 & 1.0.1

分别测试了 0.8.3和1.0.1版本

该问题会导致多个组件之间异常。我遇到的是 日历控件 关闭后 prompt 打开 无法关闭

• 代码表示： div.weui-dialog该元素不会消失，随着打开关闭会越来越多。

断点调试，发现 transitionEnd 回调的 this指向 为 .weui-mask。但在 $.fn.transitionEnd = function(callback){...} 循环中又是正常的。

使用 jquery 版本 1.11.0 及其以上 正常

使用 jquery 版本 低于1.11.0 异常

• 模拟测试 将相关代码测试，可以到 jquery 1.7 没问题。:joy: 我无法定位问题所在。现在仅仅建议采用 jquery 1.11.0+ 作为引用。

  .weui_dialog, .weui_mask {
   width: 100px;
   height: 100px;
   background-color: royalblue;
   opacity: 0;
   transition: all 1s;
  }
  .weui_mask {
   background-color: red;
  }
  .weui_dialog_visible, .weui_mask_visible {
   opacity: 1;
  }

  <div class="weui_mask weui_mask_visible"></div>
  <div class="weui_dialog weui_dialog_visible"></div>
  <button type="button" id="btn">测试</button>

  
  $.fn.transitionEnd = function(callback) {
  var events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd', 'MSTransitionEnd', 'msTransitionEnd'],
      i, dom = this;
  
  function fireCallBack(e) {
      /*jshint validthis:true */
      if (e.target !== this) return;
      callback.call(this, e);
      for (i = 0; i < events.length; i++) {
          dom.off(events[i], fireCallBack);
      }
  }
  if (callback) {
      for (i = 0; i < events.length; i++) {
          dom.on(events[i], fireCallBack);
      }
  }
  return this;
  };

$('#btn').click(function () { $(".weui_mask_visible").removeClass("weui_mask_visible").transitionEnd(function() { $(this).remove(); }); $(".weui_dialog_visible").removeClass("weui_dialog_visible").transitionEnd(function() { $(this).remove(); }); });

先谢过了~

[fengqiming]

同问