fix: 升级sidebar 组件，加入 mask 动画小姑 (#895)

mipengine · Nov 16, 2017 · b2b0057 · b2b0057
1 parent 20e4a30
commit b2b0057
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/src/mip-sidebar/mip-sidebar.js b/src/mip-sidebar/mip-sidebar.js
@@ -8,6 +8,7 @@
 define(function (require) {
     var customElement = require('customElement').create();
     var util = require('util');
+    var naboo = util.naboo;
 
     /**
      * [toggle 打开或关闭 sidebar 入口]
@@ -24,6 +25,10 @@ define(function (require) {
     function open() {
 
         var self = this;
+        if (self.runing) {
+            return;
+        }
+        self.runing = true;
 
         if (isOpen.call(this)) {
             return;
@@ -55,6 +60,10 @@ define(function (require) {
     function close(event) {
 
         var self = this;
+        if (self.runing) {
+            return;
+        }
+        self.runing = true;
         event.preventDefault();
 
         self.element.removeAttribute('open');
@@ -102,16 +111,31 @@ define(function (require) {
         self.maskElement.setAttribute('on', 'tap:' + self.id + '.close');
 
         // 样式设置
-        util.css(self.maskElement, {display: 'block'});
-
+        self.maskElement.style.display = 'block';
+
+        naboo.animate(self.maskElement, {
+            opacity: 0.2
+        }, {
+            duration: 500
+        }).start(function () {
+            self.runing = false;
+        });
     }
 
     /**
      * [closeMask 关闭遮盖层]
      */
     function closeMask() {
-        if (this.maskElement) {
-            util.css(this.maskElement, {display: 'none'});
+        var self = this;
+        if (self.maskElement) {
+            naboo.animate(self.maskElement, {
+                opacity: 0
+            }, {
+                duration: 500
+            }).start(function () {
+                self.maskElement.style.display = 'none';
+                self.runing = false;
+            });
         }
     }
 

diff --git a/src/mip-sidebar/mip-sidebar.less b/src/mip-sidebar/mip-sidebar.less
@@ -43,7 +43,7 @@ mip-sidebar[side][open] {
     left: 0!important;
     width: 100%!important;
     height: 100%!important;
-    opacity: 0.2;
+    opacity: 0;
     background-image: none!important;
     background-color: #000;
     z-index: 9998!important;

diff --git a/src/mip-sidebar/package.json b/src/mip-sidebar/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mip-sidebar",
-    "version": "1.1.6",
+    "version": "1.1.7",
     "description": "侧边栏组件，点击按钮，侧边栏滑入屏幕。",
     "contributors": [
         {