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

This commit is contained in:
2026-03-22 00:04:52 +03:00
parent 637a4671cf
commit 4b59f40fd5
+11 -5
View File
@@ -45,17 +45,23 @@ function _highlightCard(card: HTMLElement): void {
// Scroll to card
card.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Apply highlight via inline style to avoid interfering with stagger animation
const saved = card.style.cssText;
// Kill the stagger animation first so it won't replay on cleanup
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.position = 'relative';
card.style.zIndex = '11';
// Cleanup after duration — restore original inline styles
// Cleanup after duration
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');
setTimeout(() => overlay.remove(), 300); // wait for fade-out
setTimeout(() => overlay.remove(), 300);
}, HIGHLIGHT_DURATION);
}