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

我想要的基本上是一个奇特的过滤器，你点击一个复选框来显示/隐藏一个卡片类型。动画将所有卡移出视图，执行显示/隐藏逻辑移出视图，然后仅滑回选定的卡类型

我可以让他们滑下，只是不能找到一个好的方式来执行显示/隐藏，然后滑回-这样的行动可以重复

有什么想法吗？看小提琴看得更清楚些

$（函数（）{
$（'input[type=“checkbox”]”）。在（'click'，函数（）{
设arr_SessionsToShow=[]；
$（'input[type=“checkbox”]：checked'）。每个（函数（）{
arr_SessionsToShow.push（$（this.val（））；
});
显示会话（arr_SessionsToShow）；
});
});
var showhidessessions=函数（arr_SessionsToShow）{
变量卡=$（“.card”）；
const length=cards.length；
设i=0；
setFiniteInterval（函数（）{
if（arr_SessionsToShow.includes（$（cards[i]）.attr（'data-type'））{
$（cards[i]）.addClass（'bounce-out-in'）；
}
否则{
$（cards[i]）.addClass（'bounce-out-left'）；
}
i++；
}，50，长度，函数（）{
//也许在这里吃点什么？
});
};
//为定义的重复次数设置间隔
var setFiniteInterval=函数（回调、间隔、重复、之后）{
设x=0；
让intervalId=window.setInterval（函数（）{
回调（）；
如果（x++==重复次数）{
窗口。clearInterval（intervalId）；
如果（之后）
在（）之后；
}
}，间隔）；
};
.container{
宽度：300px；
溢出：隐藏；
显示：内联块；
}
保险商实验室{
显示：内联块；
垂直对齐：顶部；
}
.卡片{
宽度：100%；
高度：100px；
}
.type1{
背景色：红色；
颜色：#fff；
}
.类型2{
背景颜色：蓝色；
颜色：#fff；
}
.类型3{
背景颜色：橙色；
颜色：蓝色；
}
.向左弹跳{
动画：反弹出左0.5s缓进；
动画填充模式：正向；
}
.跳出{
动画：在1s内弹跳出来放松；
动画填充模式：正向；
}
@关键帧在中反弹{
0%{左边距：0px；}
10%{左边距：-10px；}
50%{
左边距：400px；
}
90%{
左边距：-10px；
}
100%{
左边距：0px；
}
}
@关键帧向左反弹{
0%{
左边距：0px；
}
10%{
左边距：-10px；
}
98%{
左边距：400px；
}
99% {
左边距：400px；
填充：0px；
高度：0px；
}
100% {
左边距：0px；
填充：0px；
高度：0px；
}
}

类型1
类型2
类型3
类型2
类型1
类型2
类型1
类型2
类型3


显示类型1？：


显示类型2？：


显示类型3？：

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

通过按类查找卡片，您可以更轻松地操纵它们

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

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


$（文档）.ready（（）=>{
$（'input[type=checkbox]'）。单击（函数（）{
让classname=“.”+$（this）.val（）
console.log（类名）
if（$（this.prop（'checked'））{
$（classname）.show（）
$（classname）.addClass（“在中跳出”）
$（classname）.removeClass（“从左侧跳出”）
}否则{
设置超时（（）=>{
$（classname）.hide（）
}, 500)
$（classname）.addClass（“从左侧跳出”）
$（classname）.removeClass（“在中跳出”）
}
})
})
.container{
宽度：300px；
溢出：隐藏；
显示：内联块；
}
保险商实验室{
显示：内联块；
垂直对齐：顶部；
}
.卡片{
宽度：100%；
高度：100px；
}
.type1{
背景色：红色；
颜色：#fff；
}
.类型2{
背景颜色：蓝色；
颜色：#fff；
}
.类型3{
背景颜色：橙色；
颜色：蓝色；
}
.向左弹跳{
动画：反弹出左0.5s缓进；
动画填充模式：正向；
}
.跳出{
动画：在1s内弹跳出来放松；
动画填充模式：正向；
}
@关键帧在中反弹{
0%{左边距：0px；}
10%{左边距：-10px；}
50%{
左边距：400px；
}
90%{
左边距：-10px；
}
100%{
左边距：0px；
}
}
@关键帧向左反弹{
0%{
左边距：0px；
}
10%{
左边距：-10px；
}
98%{
左边距：400px；
}
99% {
左边距：400px；
填充：0px；
高度：0px；
}
100% {
左边距：0px；
填充：0px；
高度：0px；
}
}

类型1
类型2
类型3
类型2
类型1
类型2
类型1
类型2
类型3


显示类型1？：


显示类型2？：


显示类型3？：

付出了很大努力-但这里有一个问题。当重新选择复选框时，卡会在动画开始之前闪烁。我的想法是将所有卡移出，只将选定的卡移回，以避开此问题：）