From 0e750c64db575e8f4523632e773cfa881af7fee1 Mon Sep 17 00:00:00 2001
From: one <wangan.cs@gmail.com>
Date: Thu, 21 Aug 2025 08:42:20 +0800
Subject: [PATCH] refactor: improve locate highlight animation (#9345)

---
 src/renderer/src/assets/styles/animation.scss | 20 +++++++++++++++++++
 .../src/pages/home/Messages/Message.tsx       | 15 ++++++++------
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/assets/styles/animation.scss b/src/renderer/src/assets/styles/animation.scss
index bbc1c569f3..9b8b428c5c 100644
--- a/src/renderer/src/assets/styles/animation.scss
+++ b/src/renderer/src/assets/styles/animation.scss
@@ -68,3 +68,23 @@
   transform-origin: center;
   animation: animation-rotate 0.75s linear infinite;
 }
+
+// 定位高亮动画
+@keyframes animation-locate-highlight {
+  0% {
+    background-color: transparent;
+  }
+  10% {
+    background-color: var(--color-primary-mute);
+  }
+  70% {
+    background-color: var(--color-primary-mute);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+.animation-locate-highlight {
+  animation: animation-locate-highlight 2.5s ease-in-out;
+}
diff --git a/src/renderer/src/pages/home/Messages/Message.tsx b/src/renderer/src/pages/home/Messages/Message.tsx
index da595eebce..4f7c1fd1c5 100644
--- a/src/renderer/src/pages/home/Messages/Message.tsx
+++ b/src/renderer/src/pages/home/Messages/Message.tsx
@@ -127,11 +127,17 @@ const MessageItem: FC<Props> = ({
         messageContainerRef.current.scrollIntoView({ behavior: 'smooth' })
         if (highlight) {
           setTimeoutTimer(
-            'messageHighlightHandler_1',
+            'messageHighlightHandler',
             () => {
               const classList = messageContainerRef.current?.classList
-              classList?.add('message-highlight')
-              setTimeoutTimer('messageHighlightHandler_2', () => classList?.remove('message-highlight'), 2500)
+              classList?.add('animation-locate-highlight')
+
+              const handleAnimationEnd = () => {
+                classList?.remove('animation-locate-highlight')
+                messageContainerRef.current?.removeEventListener('animationend', handleAnimationEnd)
+              }
+
+              messageContainerRef.current?.addEventListener('animationend', handleAnimationEnd)
             },
             500
           )
@@ -242,9 +248,6 @@ const MessageContainer = styled.div`
   padding: 10px;
   padding-bottom: 0;
   border-radius: 10px;
-  &.message-highlight {
-    background-color: var(--color-primary-mute);
-  }
   .menubar {
     opacity: 0;
     transition: opacity 0.2s ease;