alexei.dolgolyov/notify-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 31 Wiki Activity

fix: card highlight animation — kill stagger before highlight, keep animation:none on cleanup

Browse Source
This commit is contained in:
Admin
2026-03-22 00:04:52 +03:00
parent 637a4671cf
commit 4b59f40fd5
1 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/highlight.ts
+11 -5
View File
@@ -45,17 +45,23 @@ function _highlightCard(card: HTMLElement): void {
// Scroll to card // Scroll to card
card.scrollIntoView({ behavior: 'smooth', block: 'center' }); card.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Apply highlight via inline style to avoid interfering with stagger animation // Kill the stagger animation first so it won't replay on cleanup
const saved = card.style.cssText; card.style.animation = 'none';
// Force reflow to commit the "none"
void card.offsetHeight;
// Now set the highlight animation + z-index above overlay
card.style.animation = 'cardHighlight 2s ease-in-out'; card.style.animation = 'cardHighlight 2s ease-in-out';
card.style.position = 'relative'; card.style.position = 'relative';
card.style.zIndex = '11'; card.style.zIndex = '11';
// Cleanup after duration — restore original inline styles // Cleanup after duration
setTimeout(() => { setTimeout(() => {
card.style.cssText = saved; // Set animation to "none" to prevent stagger replay, then remove inline overrides
card.style.animation = 'none';
card.style.removeProperty('position');
card.style.removeProperty('z-index');
overlay.classList.remove('active'); overlay.classList.remove('active');
setTimeout(() => overlay.remove(), 300); // wait for fade-out setTimeout(() => overlay.remove(), 300);
}, HIGHLIGHT_DURATION); }, HIGHLIGHT_DURATION);
} }