From 49851d4a57494857852ee0a597580d4dbee3e34f Mon Sep 17 00:00:00 2001
From: yzy <1279165429@qq.com>
Date: Fri, 21 Jan 2022 20:11:11 +0800
Subject: [PATCH] (#36) Add popups

---
 miniprogram/modular/Popups/Popups.scss | 34 ++++++++++++++++++++++++++
 miniprogram/modular/Popups/Popups.ts   | 32 ++++++++++++++++++++----
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/miniprogram/modular/Popups/Popups.scss b/miniprogram/modular/Popups/Popups.scss
index 6a4d4dc..0bdfd61 100644
--- a/miniprogram/modular/Popups/Popups.scss
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/miniprogram/modular/Popups/Popups.ts b/miniprogram/modular/Popups/Popups.ts
index 7c36aff..1154635 100644
--- a/miniprogram/modular/Popups/Popups.ts
+++ b/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() {