javascript - 有没有办法使用 display:none 来动画内容过滤?
问题描述
我一直在根据本指南设计一个用于我的投资组合的内容过滤器:
https://www.w3schools.com/howto/howto_js_filter_elements.asp
它工作得很好,但我遇到了一个问题,这个问题源于我不完全理解示例链接中包含的 JS。添加和删除了“show”类以过滤内容,但由于它依赖于display:none
and display:flex
,因此无法进行动画处理,并且目前在视觉上很刺眼。
我尝试使用高度、宽度、不透明度和可见性,但正如您想象的那样,如果没有display:none
,我的网站上会留下巨大的空间。这是一个粗略的小提琴,展示了我的投资组合以及我设置动态内容和过滤的方式。
https://jsfiddle.net/qc35ghpd/
以下是来自 w3schools 网站的 JS。
<style>
.filterDiv {
opacity: 0;
transition: opacity 1s ease 0s;
display: none;
}
.show {
opacity: 1;
transition: opacity 1s ease 0s;
display:flex;
}
</style>
<script>
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
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];}
}
}
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(" ");
}
</script>
我得到的结果是预期的,所以我真的在寻找一种方法来修改上面的代码,允许在 和 的切换之间进行某种display:flex
动画display:none
。