fix: ensure post card hover effects work by preventing animation property locking
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
This commit is contained in:
@@ -209,12 +209,12 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(20px);
|
transform: translateY(20px);
|
||||||
}
|
}
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.animate-fadeInUp {
|
.animate-fadeInUp {
|
||||||
animation: fadeInUp 0.5s ease-out forwards;
|
animation: fadeInUp 0.5s ease-out forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-grid-item.animated {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|||||||
@@ -11,6 +11,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
item.style.animationDelay = `${index * 100}ms`;
|
item.style.animationDelay = `${index * 100}ms`;
|
||||||
item.classList.add('animate-fadeInUp');
|
item.classList.add('animate-fadeInUp');
|
||||||
item.classList.add('animated');
|
item.classList.add('animated');
|
||||||
|
|
||||||
|
// Clean up animation class after it finishes to allow hover transforms
|
||||||
|
item.addEventListener('animationend', () => {
|
||||||
|
item.classList.remove('animate-fadeInUp');
|
||||||
|
item.style.opacity = '1';
|
||||||
|
}, { once: true });
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user