如何添加淡入淡出/动画来过滤脚本？

Question

我想在此脚本中添加淡入淡出的动画，以便当相应的元素可见时它们会淡入。

这是我没有添加任何动画尝试的内容。我已经尝试在ddAddClass函数和filterSelection函数中添加.fadeIn（）行，但这不起作用。

filterSelection("all")

function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("ddGrpFilter");
    if (c == "all") c = "";
    for (i = 0; i < x.length; i++) {
        ddRemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) ddAddClass(x[i], "show");
    }
}

function ddAddClass(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 ddRemoveClass(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(" ");
}

var btnContainer = document.getElementById("ddGrpNav");
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";
    });
}

Here's a fiddle，我以为您会在其中添加动画。