如何重置 jquery/javascript 過濾器

Question

我有一個 div 項目列表，我正在通過 JS 過濾/排序。 每個項目都會動畫到位 - 在這種情況下，會放大到其最終大小。

當我通過按鈕過濾項目時，屏幕上的任何內容都不會再次播放此動畫。

每次選擇新按鈕時如何重置過濾器，因此無論正在過濾什么以及它當前是否在屏幕上，每個項目總是動畫到位？

在這里工作 CODEPEN

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

Answer 1

要重置元素，您必須將它們恢復到動畫的 0%。 最簡單的方法是先將它們全部隱藏。 因此，與其隱藏所有當前未選擇的內容，不如先隱藏所有內容，然后再顯示您想要顯示的內容。 現在立即隱藏和顯示並沒有給第一個元素恢復到 0% 所需的時間，所以設置一個 1 毫秒的超時來給它時間。 這是修改后的代碼：

 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>

Answer 2

這個 JS 能達到你想要的嗎？

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