fix mask no transition bug (#333)

Tencent · Apr 21, 2016 · 775502c · 775502c
1 parent 3a6eaf7
commit 775502c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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();