From 775502c61c559a239e5d482b0d5e0f0edc325815 Mon Sep 17 00:00:00 2001
From: wrynnsun <10909568@qq.com>
Date: Thu, 21 Apr 2016 15:12:40 +0800
Subject: [PATCH] fix mask no transition bug (#333)

---
 dist/example/example.js | 8 +++++---
 src/example/example.js  | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

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