diff --git a/dist/example/example.js b/dist/example/example.js index fc4a293a..5682e92d 100644 --- a/dist/example/example.js +++ b/dist/example/example.js @@ -135,18 +135,20 @@ $(function () { var mask = $('#mask'); var weuiActionsheet = $('#weui_actionsheet'); weuiActionsheet.addClass('weui_actionsheet_toggle'); - mask.show().addClass('weui_fade_toggle').one('click', function () { + mask.show() + .focus()//加focus是为了触发一次页面的重排(reflow or layout thrashing),使mask的transition动画得以正常触发 + .addClass('weui_fade_toggle').one('click', function () { hideActionSheet(weuiActionsheet, mask); }); $('#actionsheet_cancel').one('click', function () { hideActionSheet(weuiActionsheet, mask); }); - weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd'); + mask.unbind('transitionend').unbind('webkitTransitionEnd'); function hideActionSheet(weuiActionsheet, mask) { weuiActionsheet.removeClass('weui_actionsheet_toggle'); mask.removeClass('weui_fade_toggle'); - weuiActionsheet.on('transitionend', function () { + mask.on('transitionend', function () { mask.hide(); }).on('webkitTransitionEnd', function () { mask.hide(); diff --git a/src/example/example.js b/src/example/example.js index fc4a293a..5682e92d 100644 --- a/src/example/example.js +++ b/src/example/example.js @@ -135,18 +135,20 @@ $(function () { var mask = $('#mask'); var weuiActionsheet = $('#weui_actionsheet'); weuiActionsheet.addClass('weui_actionsheet_toggle'); - mask.show().addClass('weui_fade_toggle').one('click', function () { + mask.show() + .focus()//加focus是为了触发一次页面的重排(reflow or layout thrashing),使mask的transition动画得以正常触发 + .addClass('weui_fade_toggle').one('click', function () { hideActionSheet(weuiActionsheet, mask); }); $('#actionsheet_cancel').one('click', function () { hideActionSheet(weuiActionsheet, mask); }); - weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd'); + mask.unbind('transitionend').unbind('webkitTransitionEnd'); function hideActionSheet(weuiActionsheet, mask) { weuiActionsheet.removeClass('weui_actionsheet_toggle'); mask.removeClass('weui_fade_toggle'); - weuiActionsheet.on('transitionend', function () { + mask.on('transitionend', function () { mask.hide(); }).on('webkitTransitionEnd', function () { mask.hide();