fix: prevent stagger animation replay after card highlight ends
Use inline style.animation instead of CSS class to avoid triggering stagger-children fadeSlideIn re-animation when highlight is removed. Restores original inline styles on cleanup.
This commit is contained in:
@@ -190,12 +190,6 @@ a:focus-visible {
|
|||||||
25%, 75% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 20px color-mix(in srgb, var(--color-primary) 30%, transparent); }
|
25%, 75% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 20px color-mix(in srgb, var(--color-primary) 30%, transparent); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-highlight {
|
|
||||||
animation: cardHighlight 2s ease-in-out;
|
|
||||||
position: relative;
|
|
||||||
z-index: 11;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-dim-overlay {
|
.nav-dim-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
|
|||||||
@@ -45,12 +45,15 @@ 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
|
// Apply highlight via inline style to avoid interfering with stagger animation
|
||||||
card.classList.add('card-highlight');
|
const saved = card.style.cssText;
|
||||||
|
card.style.animation = 'cardHighlight 2s ease-in-out';
|
||||||
|
card.style.position = 'relative';
|
||||||
|
card.style.zIndex = '11';
|
||||||
|
|
||||||
// Cleanup after duration
|
// Cleanup after duration — restore original inline styles
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
card.classList.remove('card-highlight');
|
card.style.cssText = saved;
|
||||||
overlay.classList.remove('active');
|
overlay.classList.remove('active');
|
||||||
setTimeout(() => overlay.remove(), 300); // wait for fade-out
|
setTimeout(() => overlay.remove(), 300); // wait for fade-out
|
||||||
}, HIGHLIGHT_DURATION);
|
}, HIGHLIGHT_DURATION);
|
||||||
|
|||||||
Reference in New Issue
Block a user