I have a list of div items which I am filtering/sorting via JS. Each item animates in to place - in this case, scales up to its final size.
When I filter the items via buttons, anything already on screen DOES NOT play this animation again.
How can I RESET the filter every time a new button is selected, so EVERY item ALWAYS animates in to place no matter what is being filtered and whether or not it is currently on screen?
<div class="filter-list">
<button class="active btn" id="all">All</button>
<button class="btn" id="oranges">Oranges</button>
<button class="btn" id="apples">Apples</button>
<button class="btn" id="bananas">Bananas</button>
</div>
<div class="grid">
<div class="artist-img item oranges">oranges</div>
<div class="artist-img item apples">apples</div>
<div class="artist-img item bananas">oranges</div>
</div>
JS
var $items = $(".item");
var $btns = $(".btn").click(function () {
if (this.id == "all") {
$items.show();
} else {
var $el = $("." + this.id).show();
$items.not($el).hide();
}
$btns.removeClass("active");
$(this).addClass("active");
});
CSS
@keyframes entrance {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
.grid > div {
padding: 1rem;
position: relative;
animation-duration: 0.5s;
animation-name: entrance;
}
To reset the elements you have to get them back to the 0% on the animation. The easiest way to do that is to hide them all first. So instead of hiding all the ones that are not currently selected, hide everything first, then show what you want to show after that. Now immediately hiding and showing does not give the time needed for the first element to get back to 0%, so set a timeout for 1 ms to give it time. Here is the modified code:
var $items = $(".item");
var $btns = $(".btn").click(function() {
$items.hide();
setTimeout(() => {
if (this.id == "all") {
$items.show();
} else {
$("." + this.id).show();
}
}, 1);
$btns.removeClass("active");
$(this).addClass("active");
});button {
padding: 1rem;
}
.filter-list {
margin: 1rem;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1rem;
row-gap;
1rem;
}
.grid>div {
background: #000;
padding: 3rem;
animation-duration: 0.5s;
animation-name: entrance;
color: #fff;
}
@keyframes entrance {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-list">
<button class="active btn" id="all">All</button>
<button class="btn" id="oranges">Oranges</button>
<button class="btn" id="apples">Apples</button>
<button class="btn" id="bananas">Bananas</button>
</div>
<div class="grid">
<div class="artist-img item oranges">
oranges
</div>
<div class="artist-img item apples">
apples
</div>
<div class="artist-img item oranges">
oranges
</div>
<div class="artist-img item oranges">
oranges
</div>
<div class="artist-img item apples">
apples
</div>
<div class="artist-img item bananas">
bananas
</div>
<div class="artist-img item apples">
apples
</div>
<div class="artist-img item bananas">
bananas
</div>
</div>Does this JS achieve what you want?
var $items = $(".item");
var $btns = $(".btn").click(function () {
if (this.id == "all") {
$items.show();
} else {
$items.hide();
var $el = $("." + this.id).show();
// $items.not($el).hide();
}
$btns.removeClass("active");
$(this).addClass("active");
});