Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-07 05:39:05 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor: improve locate highlight animation (#9345)

Browse Source
This commit is contained in:
one 2025-08-21 08:42:20 +08:00 committed by GitHub
parent 27eef50b9f
commit 0e750c64db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/renderer/src/assets/styles/animation.scss
View File

@ -68,3 +68,23 @@
transform-origin: center; transform-origin: center;
animation: animation-rotate 0.75s linear infinite; 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;
}

15
src/renderer/src/pages/home/Messages/Message.tsx
View File

@ -127,11 +127,17 @@ const MessageItem: FC<Props> = ({
messageContainerRef.current.scrollIntoView({ behavior: 'smooth' }) messageContainerRef.current.scrollIntoView({ behavior: 'smooth' })
if (highlight) { if (highlight) {
setTimeoutTimer( setTimeoutTimer(
'messageHighlightHandler_1', 'messageHighlightHandler',
() => { () => {
const classList = messageContainerRef.current?.classList const classList = messageContainerRef.current?.classList
classList?.add('message-highlight') classList?.add('animation-locate-highlight')
setTimeoutTimer('messageHighlightHandler_2', () => classList?.remove('message-highlight'), 2500)
const handleAnimationEnd = () => {
classList?.remove('animation-locate-highlight')
messageContainerRef.current?.removeEventListener('animationend', handleAnimationEnd)
}
messageContainerRef.current?.addEventListener('animationend', handleAnimationEnd)
}, },
500 500
) )
@ -242,9 +248,6 @@ const MessageContainer = styled.div`
padding: 10px; padding: 10px;
padding-bottom: 0; padding-bottom: 0;
border-radius: 10px; border-radius: 10px;
&.message-highlight {
background-color: var(--color-primary-mute);
}
.menubar { .menubar {
opacity: 0; opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;