ok
This commit is contained in:
@@ -150,27 +150,14 @@
|
|||||||
btn.classList.add(...activeClasses);
|
btn.classList.add(...activeClasses);
|
||||||
|
|
||||||
// 2. Filter products
|
// 2. Filter products
|
||||||
let visibleIndex = 0;
|
|
||||||
|
|
||||||
productCards.forEach(card => {
|
productCards.forEach(card => {
|
||||||
// Reset animation state
|
|
||||||
card.classList.remove('is-visible');
|
|
||||||
|
|
||||||
if (category === 'all' || card.getAttribute('data-category') === category) {
|
if (category === 'all' || card.getAttribute('data-category') === category) {
|
||||||
card.style.display = 'block';
|
card.style.display = 'block';
|
||||||
|
// Ensure it's visible without waiting for scroll animation
|
||||||
// Recalculate transition delay dynamically based on visible items
|
|
||||||
card.style.transitionDelay = `${(visibleIndex % 4) * 100}ms`;
|
|
||||||
visibleIndex++;
|
|
||||||
|
|
||||||
// Small timeout to allow browser to register display:block before animating
|
|
||||||
setTimeout(() => {
|
|
||||||
card.classList.add('is-visible');
|
card.classList.add('is-visible');
|
||||||
}, 50);
|
card.style.transitionDelay = '0ms';
|
||||||
} else {
|
} else {
|
||||||
card.style.display = 'none';
|
card.style.display = 'none';
|
||||||
// Reset delay so it doesn't affect future changes
|
|
||||||
card.style.transitionDelay = '0ms';
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user