From ba424f450f06b41c09febba03079ec470e6dc1ce Mon Sep 17 00:00:00 2001
From: Cat Tom <linweijie2015@gmail.com>
Date: Wed, 26 Mar 2025 11:59:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=20WechatModal=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=96=B0=E5=A2=9E=E6=B7=A1=E5=87=BA=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=EF=BC=8C=E5=B9=B6=E4=BC=98=E5=8C=96=E8=BF=9B?=
 =?UTF-8?q?=E5=85=A5=E5=92=8C=E7=A6=BB=E5=BC=80=E5=8A=A8=E7=94=BB=E7=9A=84?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WechatModal.vue | 36 ++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/WechatModal.vue b/src/components/WechatModal.vue
index caf53fd..be5100f 100644
--- a/src/components/WechatModal.vue
+++ b/src/components/WechatModal.vue
@@ -378,6 +378,11 @@ onUnmounted(() => {
   to { opacity: 1; }
 }
 
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
 @keyframes scaleUp {
   from {
     transform: scale(0.8) translateY(20px);
@@ -389,17 +394,32 @@ onUnmounted(() => {
   }
 }
 
+@keyframes scaleDown {
+  from {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.8) translateY(20px);
+    opacity: 0;
+  }
+}
+
+/* 过渡动画 */
+.wechat-modal-enter-active {
+  animation: fadeIn 0.3s ease;
+}
+
+.wechat-modal-leave-active {
+  animation: fadeOut 0.3s ease;
+}
+
 .wechat-modal-enter-active .wechat-modal-container {
   animation: scaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
 }
 
 .wechat-modal-leave-active .wechat-modal-container {
-  animation: scaleUp 0.2s reverse;
-}
-
-.wechat-modal-enter-active .wechat-modal-container,
-.wechat-modal-leave-active .wechat-modal-container {
-  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
+  animation: scaleDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
 }
 
 /* 响应式布局 */
@@ -429,6 +449,10 @@ onUnmounted(() => {
 
 /* 减少运动偏好设置 */
 @media (prefers-reduced-motion: reduce) {
+  .wechat-modal-enter-active,
+  .wechat-modal-leave-active,
+  .wechat-modal-enter-active .wechat-modal-container,
+  .wechat-modal-leave-active .wechat-modal-container,
   .wechat-modal-container,
   .wechat-modal-mask,
   .qr-code-image,