Question

我正在深入学习JavaScript，我想知道我是否以最好的方式编写了这个？我尝试根据数据属性值创建自己的淡出动画。如果有简化方法，请告诉我。感谢

请不要提jQuery。我正在尝试学习JavaScript，我很清楚jQuery已经做到了这一点。

HTML

<div id="box" style="background-color: black; width: 100px; height: 100px;"></div>

<div data-action="fadeout" style="background-color: red; width: 100px; height: 100px;"></div>

<div data-action="fadeout" style="background-color: green; width: 100px; height: 100px;"></div>

<div data-action="fadut" style="background-color: green; width: 100px; height: 100px;"></div>

JavaScript

var x = document.querySelectorAll("[data-action]");
console.log(x);

for (i = 0; i < x.length; i++){

    var j = x[i];

    if (j.getAttribute("data-action") === "fadeout"){
        j.addEventListener("click", function(){
            fadeout(this);
        });
    }

}

function fadeout(x){

    var i = 1;
    x.style.position = "relative";

    fade();

    function fade(){
        console.log("hi");
        if (i > 0){

            x.style.opacity = i.toString();

            setTimeout(function(){
                fade();
                i -= .1;
            }, 50);

        } 
        else{
            x.style.display = "none";
        }
    }


}

http://jsfiddle.net/qdjLyg2o/

Answer 1

CSS动画或CSS过渡是实现淡入淡出效果的更好方法：它们会更顺畅，使用更少的CPU，也意味着更少的代码。通常避免使用JavaScript中的动画，除非使用CSS的动画或转换曲目完全无法完成。

*[data-action="fadeout"] {
    opacity: 1.0;
    transition: opacity 0.5s ease-in-out; /* your code changed opacity by 0.1 every 50ms, that's 0.0-1.0 over 500ms */
}
*[data-action='fadeout'].clicked {
    opacity: 0.0;
}

然后使用JavaScript设置.clicked类：

var divs = document.querySelectorAll("[data-action='fadeout']");
for(var i=0; i < divs.length; i++) {
    divs[i].addEventListener("click", function(){
        this.className = "clicked";
    });
}

关于JavaScript，是否有更简单的方法对此进行编码？

1 个答案: