From 6bef08f12ea005efbbe6fd7e9ae6583d75d7c192 Mon Sep 17 00:00:00 2001
From: MrKBear <mrkbear@qq.com>
Date: Thu, 20 Jan 2022 17:18:44 +0800
Subject: [PATCH] (#35) Add mask show hide motion

---
 miniprogram/modular/Mask/Mask.scss     | 37 ++++++++++++++++++++++++++
 miniprogram/modular/Mask/Mask.ts       | 25 +++++++++++++++--
 miniprogram/pages/Account/Account.wxml |  3 ++-
 3 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/miniprogram/modular/Mask/Mask.scss b/miniprogram/modular/Mask/Mask.scss
index b1c0b50..326c031 100644
--- a/miniprogram/modular/Mask/Mask.scss
+++ b/miniprogram/modular/Mask/Mask.scss
@@ -1,3 +1,4 @@
+@import "../../app.scss";
 
 view.mask {
 	position: fixed;
@@ -5,4 +6,40 @@ view.mask {
 	height: 100%;
 	background-color: rgba($color: #000000, $alpha: .2);
 	z-index: 1;
+}
+
+view.mask.block {
+    display: block;
+}
+
+view.mask.none {
+    display: none;
+}
+
+view.mask.show {
+    animation: show .1s cubic-bezier(0, 0, 1, 1) both;
+    opacity: 1;
+}
+
+view.mask.hide {
+    animation: hide .1s cubic-bezier(0, 0, 1, 1) both;
+    opacity: 0;
+}
+
+@keyframes show{
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes hide{
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
 }
\ No newline at end of file
diff --git a/miniprogram/modular/Mask/Mask.ts b/miniprogram/modular/Mask/Mask.ts
index eeaaa33..b457453 100644
--- a/miniprogram/modular/Mask/Mask.ts
+++ b/miniprogram/modular/Mask/Mask.ts
@@ -2,6 +2,11 @@ import { Modular, Manager } from "../../core/Module";
 
 class Mask<M extends Manager> extends Modular<M> {
 
+    /**
+     * 动画运行时间
+     */
+    public static readonly animateTime: number = 100;
+
 	public data? = {
 
 		/**
@@ -9,6 +14,11 @@ class Mask<M extends Manager> extends Modular<M> {
 		 */
 		zIndex: 1,
 
+        /**
+         * 蒙版是否显示
+         */
+        isDisplay: false,
+
 		/**
 		 * 蒙版是否显示
 		 */
@@ -21,14 +31,25 @@ class Mask<M extends Manager> extends Modular<M> {
 	 * 显示蒙版
 	 */
 	public showMask() {
-		this.setData({ isShow: true });
+		this.setData({ 
+            isShow: true,
+            isDisplay: true
+        });
 	}
 
 	/**
 	 * 隐藏蒙版
 	 */
 	public hideMask() {
-		this.setData({ isShow: false });
+		this.setData({ 
+            isShow: false 
+        });
+
+        this.disappearTimer = setTimeout(() => {
+            this.setData({ 
+                isDisplay: false
+            });
+        }, Mask.animateTime);
 	}
 	
 	public override onLoad() {
diff --git a/miniprogram/pages/Account/Account.wxml b/miniprogram/pages/Account/Account.wxml
index ecf8bb9..3b2b252 100644
--- a/miniprogram/pages/Account/Account.wxml
+++ b/miniprogram/pages/Account/Account.wxml
@@ -1,5 +1,6 @@
 <!-- 蒙版 -->
-<view class="mask" bindtap="mask$handleClickMask" style="display:{{mask$isShow ? 'block' : 'none'}}"></view>
+<view class="mask {{  mask$isShow ? 'show' : 'hide' }} {{ mask$isDisplay ? 'block' : 'none' }}" 
+    bindtap="mask$handleClickMask"></view>
 
 <!-- 顶部的阴影 -->
 <view class="top-shadow"></view>