尝试对关键帧动画应用滤镜

Question

我所需要的实际上是一个精美的过滤器，您单击一个复选框以显示/隐藏卡类型。动画将使所有卡消失，执行显示/隐藏逻辑，然后仅向后滑入选定卡类型。

我可以让他们滑下来，只是不能使用一种好方法来执行显示/隐藏，然后再滑入-以便重复操作。

有什么想法吗？查看小提琴以获得更清晰的图片！

$(function(){
    $('input[type="checkbox"]').on('click', function (){
        let arr_SessionsToShow = [];

        $('input[type="checkbox"]:checked').each(function () {
            arr_SessionsToShow.push($(this).val());
        });

        showHideSessions(arr_SessionsToShow);
    });
});

var showHideSessions = function (arr_SessionsToShow) {
    var cards = $('.card');
    const length = cards.length;
    let i = 0;

    setFiniteInterval(function () {
        if (arr_SessionsToShow.includes($(cards[i]).attr('data-type'))) {
                $(cards[i]).addClass('bounce-out-in');
        }
        else {
                $(cards[i]).addClass('bounce-out-left');
        }
        i++;
    }, 50, length, function () {
        //Something here for after perhaps?
    });
};

// sets interval for a defined number of repetition
var setFiniteInterval = function (callback, interval, reps, after) {
    let x = 0;
    let intervalId = window.setInterval(function () {
        callback();
        if (x++ === reps) {
            window.clearInterval(intervalId);

            if (after)
                after();
        }
    }, interval);
};

.container{
  width:300px;
  overflow:hidden;
  display:inline-block;
}

ul{
   display:inline-block;
   vertical-align:top;
}

.card{
  width:100%;
  height: 100px;
}

.type1{
  background-color:red;
  color:#fff;
}

.type2{
  background-color:blue;
  color:#fff;
}

.type3{
  background-color:orange;
  color:blue;
}

.bounce-out-left{
    animation:bounce-out-left 0.5s ease-in; 
    animation-fill-mode:forwards;
}

.bounce-out-in{
    animation:bounce-out-in 1s ease-out;
    animation-fill-mode:forwards;
}

@keyframes bounce-out-in{
    0% { margin-left: 0px;}

    10%{ margin-left: -10px;}

    50%{
        margin-left:400px;
    }

    90%{
        margin-left: -10px;
    }

    100%{
        margin-left:0px;
    }
}

@keyframes bounce-out-left{
    0%{
        margin-left:0px;
    }

    10%{
        margin-left:-10px;
    }

    98%{
        margin-left:400px;
    }

    99% {
        margin-left:400px;
        padding: 0px;
        height: 0px;
    }

    100% {
        margin-left: 0px;
        padding: 0px;
        height: 0px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="container">
  <div class="card type1" data-type="type1">Type 1</div>
  <div class="card type2" data-type="type2">Type 2</div>
  <div class="card type3" data-type="type3">Type 3</div>
  <div class="card type2" data-type="type2">Type 2</div>
  <div class="card type1" data-type="type1">Type 1</div>
  <div class="card type2" data-type="type2">Type 2</div>
  <div class="card type1" data-type="type1">Type 1</div>
  <div class="card type2" data-type="type2">Type 2</div>
  <div class="card type3" data-type="type3">Type 3</div>
</div>
<ul class="checkbox-list">
      <li>
          <label for="Type1">Show Type 1?:</label>
          <input type="checkbox" value="type1" checked="checked"/>
      </li>
      <li>
          <label for="Type1">Show Type 2?:</label>
          <input type="checkbox" value="type2" checked="checked"/>
      </li>
      <li>
          <label for="Type1">Show Type 3?:</label>
          <input type="checkbox" value="type3" checked="checked" />
      </li>
</ul>

Answer 1

这里有一种更好的逻辑处理方法：

通过按卡片的类别查找卡片，您可以更轻松地操作它们。

单击任何复选框，我们可以获取其值并查看其引用的卡类别。然后，我们可以检查是否选中了该框，然后应用正确的CSS类。重要的是，我们需要删除相反的CSS类，以便在重新选中此框后再应用该类时再次发生。

隐藏卡片的超时时间是这样，因此我们可以确保在隐藏卡片之前完成动画。

$(document).ready(() => {

  $('input[type=checkbox]').click(function () {
    let classname = "." + $(this).val()
    console.log(classname)
      if ($(this).prop('checked')) {
        $(classname).show()
        $(classname).addClass("bounce-out-in")
        $(classname).removeClass("bounce-out-left")

      } else {
        setTimeout(() => {
          $(classname).hide()
        }, 500)
        $(classname).addClass("bounce-out-left")
        $(classname).removeClass("bounce-out-in")
      }
  })

})

.container{
  width:300px;
  overflow:hidden;
  display:inline-block;
}

ul{
   display:inline-block;
   vertical-align:top;
}

.card{
  width:100%;
  height: 100px;
}

.type1{
  background-color:red;
  color:#fff;
}

.type2{
  background-color:blue;
  color:#fff;
}

.type3{
  background-color:orange;
  color:blue;
}

.bounce-out-left{
    animation:bounce-out-left 0.5s ease-in; 
    animation-fill-mode:forwards;
}

.bounce-out-in{
    animation:bounce-out-in 1s ease-out;
    animation-fill-mode:forwards;
}

@keyframes bounce-out-in{
    0% { margin-left: 0px;}

    10%{ margin-left: -10px;}

    50%{
        margin-left:400px;
    }

    90%{
        margin-left: -10px;
    }

    100%{
        margin-left:0px;
    }
}

@keyframes bounce-out-left{
    0%{
        margin-left:0px;
    }

    10%{
        margin-left:-10px;
    }

    98%{
        margin-left:400px;
    }

    99% {
        margin-left:400px;
        padding: 0px;
        height: 0px;
    }

    100% {
        margin-left: 0px;
        padding: 0px;
        height: 0px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="index.css">
<div class="container">
  <div class="card type1" data-type="type1">Type 1</div>
  <div class="card type2" data-type="type2">Type 2</div>
  <div class="card type3" data-type="type3">Type 3</div>
  <div class="card type2" data-type="type2">Type 2</div>
  <div class="card type1" data-type="type1">Type 1</div>
  <div class="card type2" data-type="type2">Type 2</div>
  <div class="card type1" data-type="type1">Type 1</div>
  <div class="card type2" data-type="type2">Type 2</div>
  <div class="card type3" data-type="type3">Type 3</div>
</div>
<ul class="checkbox-list">
      <li>
          <label for="Type1">Show Type 1?:</label>
          <input type="checkbox" value="type1" checked="checked"/>
      </li>
      <li>
          <label for="Type1">Show Type 2?:</label>
          <input type="checkbox" value="type2" checked="checked"/>
      </li>
      <li>
          <label for="Type1">Show Type 3?:</label>
          <input type="checkbox" value="type3" checked="checked" />
      </li>
</ul>