(#35) Add mask show hide motion

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;
+    }
 }

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

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>