如何设置js过滤的动画

Question

我使用Bootstrap，从W3Schools获得可过滤div元素的JavaScript代码。这是一个很容易过滤的模式，但没有动画会有点无聊。

正因为如此，我试图在我的过滤代码中添加一些CSS或js的动画，但我不知道如何运行。我尝试了CSS和js动画，但没有，它不起作用。

HTML

<div class="container-fluid">
<div id="myBtnContainer">
<ul>
<li class="list-inline-item"><button class="btn active" onclick="filterSelection('all')">All</button></li>
<li class="list-inline-item"><button class="btn" onclick="filterSelection('category1')">Category1</button></li>
<li class="list-inline-item"><button class="btn" onclick="filterSelection('category2')">Category2</button></li>
</ul>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3 pt-2 pb-5">
<div class="col fade-in-image filterDiv category1 show">
<a href="http://localhost:8888/test01/projects/project1/">
<div class="card">
<img width="480" height="320" src="http://localhost:8888/test01/wp-content/uploads/2021/06/img1.jpeg" class="img-fluid wp-post-image" alt="" loading="lazy">                
<div class="hover-project">
<h3 class="titol-projecte">Project 1</h3>
<p class="location pb-4">Location 1</p>
<p class="category">Category 1</p> 
</div>
</div>
</a>
</div>
<div class="col fade-in-image filterDiv category-2 show">
<a href="http://localhost:8888/test01/projects/project2/">
<div class="card">
<img width="480" height="320" src="http://localhost:8888/test01/wp-content/uploads/2021/06/img2.jpeg" class="img-fluid wp-post-image" alt="" loading="lazy">             
<div class="hover-project">
<h3 class="titol-projecte">Project 2</h3>
<p class="location pb-4">Location 2</p>
<p class="category">Category 2</p> 
</div>
</div>
</a>
</div>              
</div>
</div>

我使用的JavaScript：

filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1); 
}
}
element.className = arr1.join(" ");
}
// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}

CSS我使用

.filterDiv {
display: none; /* Hidden by default */
visibility: hidden;
opacity: 0;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
visibility: visible;
opacity: 1;
}

谢谢！！

Answer 1

这里有一个可以用于代码的现成示例，在我看来，非常神奇

<div class="wrap">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>Filter Programs</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<div class="programs">
<button class="filter-btn" data-filter="all">All</button>
<button class="filter-btn" data-filter=".undergraduate">Undergraduate</button>
<button class="filter-btn" data-filter=".graduate">Graduate</button>
<button class="filter-btn" data-filter=".phd">PhD</button>
</div>
</div>
</div><!-- end of row -->
<div class="row">
<div class="columns twelve">
<h4>Sort Programs</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="columns twelve">
<div class="programs">
<button class="sort-btn" data-sort="default:asc">Default</button>
<button class="sort-btn" data-sort="random">Random</button>
<button class="sort-btn" data-sort="order:asc">Ascending</button>
<button class="sort-btn" data-sort="year:desc order:desc">Descending<span
class="multi">(Multi)</span></button>
</div>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<h4>Programs List</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<ul class="courses" id="mix-wrapper">
<li class="mix-target undergraduate" data-order="5" data-year="4"><a
href="#">Economics<span>(U)</span></a></li>
<li class="mix-target graduate" data-order="14" data-year="2"><a
href="#">Pharmacology<span>(G)</span></a></li>
<li class="mix-target graduate" data-order="7" data-year="1"><a
href="#">Informatics<span>(G)</span></a></li>
<li class="mix-target phd" data-order="4" data-year="3"><a href="#">Criminology<span>(P)</span></a>
</li>
<li class="mix-target undergraduate" data-order="16" data-year="3"><a
href="#">Sociology<span>(U)</span></a></li>
<li class="mix-target undergraduate" data-order="6" data-year="4"><a
href="#">Greek<span>(U)</span></a></li>
<li class="mix-target phd" data-order="1" data-year="3"><a href="#">Astrophysics<span>(P)</span></a>
</li>
<li class="mix-target undergraduate" data-order="12" data-year="4"><a
href="#">Nursing<span>(U)</span></a></li>
<li class="mix-target undergraduate" data-order="10" data-year="5"><a
href="#">Microbiology<span>(U)</span></a></li>
<li class="mix-target undergraduate" data-order="9" data-year="4"><a
href="#">Mathematics<span>(U)</span></a></li>
<li class="mix-target graduate" data-order="11" data-year="3"><a
href="#">Nanoscience<span>(G)</span></a></li>
<li class="mix-target phd" data-order="2" data-year="2"><a href="#">Biochemistry<span>(P)</span></a>
</li>
<li class="mix-target phd" data-order="13" data-year="3"><a href="#">Pathology<span>(P)</span></a>
</li>
<li class="mix-target graduate" data-order="8" data-year="1"><a
href="#">Management<span>(G)</span></a></li>
<li class="mix-target graduate" data-order="3" data-year="2"><a
href="#">Biostatistics<span>(G)</span></a></li>
<li class="mix-target phd" data-order="15" data-year="4"><a     href="#">Public
Health<span>(P)</span></a></li>
</ul>
</div>
</div>
</div>
</div>

CSS：

@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC);
body {
background: #ededed;
font-family: 'Alegreya Sans SC', sans-serif;
}
h4 {
font-size: 21px;
border-radius: 5px;
margin: 0 auto;
text-align: center;
background: #d2d2d2;
color: white;
font-weight: 700;
padding: 3px 0;
}
li {
margin: 0;
}
a {
font-size: 18px;
text-decoration: none;
}
span {
display: block;
font-size: .75em;
font-style: italic;
position: relative;
top: 5px;
}
.multi {
display: inline;
top: 0;
left: 3px;
}
img {
max-width: 100%;
}
.programs,
.courses {
margin: 8px 0 0 0;
}
.programs {
font-size: 0;
margin-bottom: 15px;
}
.programs button {
outline: none;
margin-bottom: 0;
background: whitesmoke;
width: 50%;
height: auto;
font-weight: normal;
border: 1px solid #ededed;
color: #000000;
font-size: 14px;
padding: 4px 0;
text-shadow: 0px 0px 0px #2f6627;
}
.programs button:hover {
background: #99cfe0;
}
.programs button.programs-filter-btn-active,
.programs button.programs-sort-btn-active {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent;
background: #3a9fbf;
color: white;
}
.courses {
margin-bottom: 15px;
font-size: 0;
background: whitesmoke;
}
.courses li {
text-align: center;
font-size: 14px;
display: inline-block;
width: 46%;
margin: 0 2%;
}
.courses a {
display: block;
height: 60px;
margin: 15px 0;
padding-top: 12.5px;
background: whitesmoke;
color: black;
border: 1px solid white;
transition: all .4s ease;
}
.courses a:hover {
background: #99cfe0;
}
.p, .p a {
font-family: Arial, sans-serif;
font-size: 14px;
text-align: center;
}

/* MEDIA QUERIES STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (min-width: 750px) {
.container {
width: 95%;
}
.courses a {
background: #EBEBEB;
border: none;
}
h4 {
width: 50%;
margin-top: 12px;
}
img {
margin-bottom: 0;
}
.programs {
margin-bottom: 0;
}
.programs button {
width: 25%;
margin-bottom: 15px;
}
.courses li {
width: 21%;
}
}

JS：

mixitup('#mix-wrapper', {
load: {
sort: 'order:asc'
},
animation: {
effects: 'fade rotateZ(-180deg)',
duration: 700
},
classNames: {
block: 'programs',
elementFilter: 'filter-btn',
elementSort: 'sort-btn'
},
selectors: {
target: '.mix-target'
}
});