From cc0c29bd720b7e077a8e65126d5c5750cfb305d3 Mon Sep 17 00:00:00 2001 From: Mekan1206 Date: Sat, 6 Jun 2026 00:24:02 +0500 Subject: [PATCH] Enhance product card filtering and animation in Home view - Added dynamic transition delay for product cards based on visible items to improve animation effects. - Reset animation state and transition delay for hidden cards to ensure smooth filtering experience. - Improved overall user interaction with category-based product visibility. --- resources/views/home.blade.php | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index 9ef8de2..8e0fb0f 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -150,20 +150,32 @@ btn.classList.add(...activeClasses); // 2. Filter products + let visibleIndex = 0; + productCards.forEach(card => { + // Reset animation state + card.classList.remove('is-visible'); + if (category === 'all' || card.getAttribute('data-category') === category) { card.style.display = 'block'; - // Small timeout to allow display:block to apply before re-animating + + // 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'); }, 50); } else { card.style.display = 'none'; - card.classList.remove('is-visible'); + // Reset delay so it doesn't affect future changes + card.style.transitionDelay = '0ms'; } }); }); }); + });