javascript - 尝试使用关键帧动画应用过滤器

Question

我所追求的本质上是一个奇特的过滤器，您可以单击一个复选框来显示/隐藏卡片类型。动画会将所有卡片移出 View ，在 View 外执行显示/隐藏逻辑，然后仅针对选定卡片类型滑回。

我可以让它们滑开，只是想不出一个好的方法来执行显示/隐藏然后滑回 - 这样就可以重复这些 Action 。

有什么想法吗？查看 fiddle 以获得更清晰的图片!

$(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>