From 5511062d266a280b03229e0bd4bed14177153ada Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Tue, 29 Aug 2023 17:09:29 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB=20=E5=8A=A8=E7=94=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=8A=EF=BC=8C=E8=BF=87=E6=B8=A1=E8=87=AA=E7=84=B6=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/func/confirm.vue | 66 +++++++++++++++++++++++++++++++--
 1 file changed, 63 insertions(+), 3 deletions(-)

diff --git a/src/components/func/confirm.vue b/src/components/func/confirm.vue
index 24912c9b..09ba587b 100644
--- a/src/components/func/confirm.vue
+++ b/src/components/func/confirm.vue
@@ -1,8 +1,8 @@
 <template>
   <transition name="func-confirm-outer">
-    <div v-show="show" class="confirm-overlay" @click.self.prevent="handleOuter">
+    <div v-show="show || showOuter" class="confirm-overlay" @click.self.prevent="handleOuter">
       <transition name="func-confirm-inner">
-        <div class="confirm-box">
+        <div v-show="showInner" class="confirm-box">
           <div class="confirm-title">
             {{ data.title ?? "" }}
           </div>
@@ -56,9 +56,30 @@ const data = reactive({
   otcancel: false,
 });
 const show = ref<boolean>(false);
+const showOuter = ref<boolean>(false);
+const showInner = ref<boolean>(false);
 const confirmVal = ref<boolean | string>(false);
 const inputVal = ref<string>("");
 
+watch(
+  () => show.value,
+  () => {
+    if (show.value) {
+      showOuter.value = true;
+      setTimeout(() => {
+        showInner.value = true;
+      }, 100);
+    } else {
+      setTimeout(() => {
+        showInner.value = false;
+      }, 100);
+      setTimeout(() => {
+        showOuter.value = false;
+      }, 300);
+    }
+  },
+);
+
 onMounted(async () => {
   await displayBox(props);
 });
@@ -72,7 +93,10 @@ async function displayBox(props: TGApp.Component.Confirm.Params): Promise<string
   // 等待确认框关闭，返回关闭后的confirmVal
   return await new Promise<string | boolean>((resolve) => {
     watch(show, () => {
-      resolve(confirmVal.value);
+      // 等 0.5s 动画
+      setTimeout(() => {
+        resolve(confirmVal.value);
+      }, 500);
     });
   });
 }
@@ -107,6 +131,42 @@ defineExpose({
 </script>
 
 <style scoped>
+.func-confirm-outer-enter-active,
+.func-confirm-outer-leave-active,
+.func-confirm-inner-enter-active {
+  transition: all 0.3s;
+}
+
+.func-confirm-inner-leave-active {
+  transition: all 0.5s ease-in-out;
+}
+
+.func-confirm-inner-enter-from {
+  opacity: 0;
+  transform: scale(1.5);
+}
+
+.func-confirm-inner-enter-to,
+.func-confirm-inner-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.func-confirm-outer-enter-to,
+.func-confirm-outer-leave-from {
+  opacity: 1;
+}
+
+.func-confirm-outer-enter-from,
+.func-confirm-outer-leave-to {
+  opacity: 0;
+}
+
+.func-confirm-inner-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
 .confirm-overlay {
   position: fixed;
   z-index: 100;