How to reset jquery/javascript filter-CodePudding

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?

WORKING CODEPEN HERE

<div >
  <button  id="all">All</button>
  <button  id="oranges">Oranges</button>
  <button  id="apples">Apples</button>
  <button  id="bananas">Bananas</button>
</div>
<div >
  <div >oranges</div>
  <div >apples</div>
  <div >oranges</div>
</div>

 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;
  }

CodePudding user response：

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 >
  <button  id="all">All</button>
  <button  id="oranges">Oranges</button>
  <button  id="apples">Apples</button>
  <button  id="bananas">Bananas</button>
</div>
<div >
  <div >
    oranges
  </div>
  <div >
    apples
  </div>
  <div >
    oranges
  </div>
  <div >
    oranges
  </div>
  <div >
    apples
  </div>
  <div >
    bananas
  </div>
  <div >
    apples
  </div>
  <div >
    bananas
  </div>
</div>

CodePudding user response：

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");
  });