From a848f714b6cf8a3d4fbcd9b4e625415ec702ddfa Mon Sep 17 00:00:00 2001
From: binary-husky <qingxu.fu@outlook.com>
Date: Sun, 22 Dec 2024 23:33:22 +0800
Subject: [PATCH] fix welcome card bugs

---
 themes/common.css |  2 +-
 themes/welcome.js | 24 +++++++++++++++---------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/themes/common.css b/themes/common.css
index c28713c1..557e800c 100644
--- a/themes/common.css
+++ b/themes/common.css
@@ -155,7 +155,7 @@
     transform: translate(-50%, -50%);
     flex-wrap: wrap;
     justify-content: center;
-    transition: opacity 1s ease-in-out;
+    transition: opacity 0.6s ease-in-out;
     opacity: 0;
 }
 .welcome-card-container.show {
diff --git a/themes/welcome.js b/themes/welcome.js
index 24135181..3111e560 100644
--- a/themes/welcome.js
+++ b/themes/welcome.js
@@ -145,8 +145,10 @@ class WelcomeMessage {
                     continue;
                 }
 
-                // 等待动画结束
-                card.addEventListener('transitionend', () => {
+
+                card.classList.add('hide');
+                const timeout = 100; // 与CSS中transition的时间保持一致(0.1s)
+                setTimeout(() => {
                     // 更新卡片信息
                     const message = this.static_welcome_message_previous[index];
                     const title = card.getElementsByClassName('welcome-card-title')[0];
@@ -158,16 +160,14 @@ class WelcomeMessage {
                     text.href = message.url;
                     content.textContent = message.content;
                     card.classList.remove('hide');
-
                     // 等待动画结束
-                    card.addEventListener('transitionend', () => {
-                        card.classList.remove('show');
-                    }, { once: true });
                     card.classList.add('show');
+                    const timeout = 100; // 与CSS中transition的时间保持一致(0.1s)
+                    setTimeout(() => {
+                        card.classList.remove('show');
+                    }, timeout);
+                }, timeout);
 
-                }, { once: true });
-
-                card.classList.add('hide');
 
                 // 等待 250 毫秒
                 await new Promise(r => setTimeout(r, 200));
@@ -306,6 +306,12 @@ class WelcomeMessage {
         welcome_card_container.addEventListener('transitionend', () => {
             elem_chatbot.removeChild(welcome_card_container);
         }, { once: true });
+        const timeout = 600; // 与CSS中transition的时间保持一致(1s)
+        setTimeout(() => {
+            if (welcome_card_container.parentNode) {
+                elem_chatbot.removeChild(welcome_card_container);
+            }
+        }, timeout);
     }
 
     async isChatbotEmpty() {