(#36) Add popups

miniprogram/modular/Popups/Popups.scss

@@ -12,4 +12,38 @@ view.popups {
     background-color: $theme-color-light-layout;
     border-radius: 15px;
     z-index: 2;
+}
+view.popups.block {
+    display: block;
+}
+view.popups.none {
+    display: none;
+}
+
+view.popups.show {
+    animation-duration: 0.5s;
+    animation-name: show;
+}
+
+view.popups.hide {
+    animation-duration: 0.5s;
+    animation-name: hide;
+}
+
+@keyframes show{
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes hide{
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
 }

miniprogram/modular/Popups/Popups.ts

@@ -2,28 +2,50 @@ import { Modular, Manager } from "../../core/Module";
 
 class Popups<M extends Manager> extends Modular<M> {
 
+     /**
+     * 动画运行时间
+     */
+    public static readonly animateTime: number = 100;
+
     public data? = {
         
         /**
 		 *  弹出层是否显示
 		 */
-		isShow: false
-    };
+        display:false,
 
-    private disappearTimer?: number;
+        /**
+         * 弹出层动画
+         */
+        isShow:false
+    };
+    
+    disappearTimer: number | undefined;
 
     /**
 	 * 显示弹出层
 	 */
 	public showPopups() {
-		this.setData({ isShow: true });
+    this.setData({
+      isShow:true,
+      display:true
+    });
 	}
 
 	/**
 	 * 隐藏弹出层
 	 */
 	public hidePopups() {
-		this.setData({ isShow: false });
+		this.setData({
+            isShow:false
+        });
+        
+        this.disappearTimer = setTimeout(() => {
+            this.setData({ 
+                display: false
+            });
+        }, Popups.animateTime);
+
 	}
 	
 	public override onLoad() {