fix mask no transition bug (#333)

Author: sklme

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();

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();