Open chang0022 opened 7 years ago
该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(); }); };
分别测试了 0.8.3和1.0.1版本
该问题会导致多个组件之间异常。我遇到的是 日历控件 关闭后 prompt 打开 无法关闭
断点调试,发现 transitionEnd 回调的 this指向 为 .weui-mask。但在 $.fn.transitionEnd = function(callback){...} 循环中又是正常的。
transitionEnd
.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(); }); });
先谢过了~
同问
该BUG #238 反馈过。我遇到相似的问题,并进行了进一步的调试。
分别测试了 0.8.3和1.0.1版本
该问题会导致多个组件之间异常。我遇到的是 日历控件 关闭后 prompt 打开 无法关闭
断点调试,发现
transitionEnd
回调的 this指向 为.weui-mask
。但在$.fn.transitionEnd = function(callback){...}
循环中又是正常的。使用 jquery 版本 1.11.0 及其以上 正常
使用 jquery 版本 低于1.11.0 异常
模拟测试 将相关代码测试,可以到 jquery 1.7 没问题。:joy: 我无法定位问题所在。现在仅仅建议采用 jquery 1.11.0+ 作为引用。
$('#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(); }); });