One issue is that using display: none does not provide a transition effect, causing the element to immediately disappear. To solve this, it's recommended to set a timeout after the transition properties have completed.
I've put together a simple CodePen example demonstrating a basic implementation of the "shuffle" effect.
Important Notes:
This solution may need further refinement for optimal performance.
It might be more effective in some cases to first apply the .filter() method to your data before applying the transition effect. This example focuses on achieving the desired visual effect rather than solely sorting functionality.
Check out the CodePen demo here
In this demonstration, I utilize flexbox for layout structure and incorporate transition with transform and width to create a minimize-to-center effect. Remember to adjust the transform-origin property to position the "close effect" correctly.
CSS Styles
.sorted-list {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
> li {
background: #CCC;
box-shadow: 0 2px 8px 1px rgba(33, 33, 33, 0.4);
height: 150px;
width: 25%;
transform-origin: center center;
transition: transform 0.45s ease, width 0.45s ease;
&.hidden {
transform: scale(0);
width: 0;
}
&.d-none {
display: none;
}
}
}
JavaScript Functions
const resetItem = (element) => {
element.classList.remove('d-none');
// Adding a slight delay to ensure smooth transition
setTimeout((scopedElement) => {
scopedElement.classList.remove('hidden');
}, 1, element);
};
const hideItem = (element) => {
element.classList.add('hidden');
// introducing a delay for display: none since it lacks transition support
setTimeout((scopedElement) => {
scopedElement.classList.add('d-none');
}, 300, element);
}
(function() {
const nav = document.querySelector('nav');
nav.addEventListener('click', (event) => {
const { group } = event.target.dataset;
// Resetting the list sort if no specific group is selected
if (!group) {
document.querySelectorAll('.sorted-list > li').forEach(resetItem);
return;
}
// Ensuring visibility of elements within the specified group
document.querySelectorAll(`.sorted-list > .group-${group}`).forEach(resetItem);
// Hiding all other elements
document.querySelectorAll(`.sorted-list > li:not(.group-${group})`).forEach(hideItem);
});
})();