不能多次更改 html 元素的不透明度答案

【问题标题】：cant change html element's opacity more than one time不能多次更改 html 元素的不透明度
【发布时间】：2019-07-08 18:55:05
【问题描述】：

我希望我的<div> 慢慢变得可见！

这是我的代码：

var Thread = {
    sleep: function(ms) {
        var start = Date.now();

        while (true) {
            var clock = (Date.now() - start);
            if (clock >= ms) break;
        }

    }
};



function anime()
{

    var elem = document.getElementById('tagd');


    document.getElementById('tagd').style.opacity += 0.4;
    console.log(document.getElementById('tagd').style.opacity);

    Thread.sleep(1000);

    document.getElementById('tagd').innerHTML ="<h1>Sometext</h1>";
    console.log("do");
function frame()
    {
            num = 0.1;
            elem.style.opacity += num;

    }


}

它可以工作，但是当我将其更改为：

var Thread = {
    sleep: function(ms) {
        var start = Date.now();

        while (true) {
            var clock = (Date.now() - start);
            if (clock >= ms) break;
        }

    }
};



function anime()
{

    var elem = document.getElementById('tagd');


    document.getElementById('tagd').style.opacity += 0.4;
    console.log(document.getElementById('tagd').style.opacity);

    Thread.sleep(1000);



document.getElementById('tagd').style.opacity += 0.4;
        console.log(document.getElementById('tagd').style.opacity);


function frame()
    {
            num = 0.1;
            elem.style.opacity += num;

    }


}

或setInterval 第二次opacity 不会改变！接缝，我不能多次更改不透明度..

html/css 代码如下：

<html>

<style>
#tagd{
width: 500px;
height: 500px;
background: darkred;
opacity: 0;
}
</style>

<head>
<script src="test.js"></script>
</head>


<body>

<input type="button" onclick="anime()">

<div id="tagd"></div>

</body>

</html>

【问题讨论】：

标签： javascript css opacity

【解决方案1】：

您可以尝试使用CSS transitions 代替JS。制作两个 CSS 类并使用 JS 更改它们。

例如。 CSS：

#tagd {
    opacity: 0;
}


.visible {
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
    opacity: 1!important;
}

JS：

function anime() {
    var element = document.getElementById("tagd");
    element.classList.toggle("visible");
}

【讨论】：

真的 tnx 兄弟；这是我需要的