Question

我希望在#div超时时添加一些转换。我还在setTimeout方法中添加了webkitTransition但未找到转换。请帮我编辑我的代码。

    <!DOCTYPE html>
    <html>

    <body>
    <style>
    #div {
        opacity: 1;
        transition: opacity 2s ease-in-out;
        -moz-transition: opacity 2s ease-in-out;
        -webkit-transition: opacity 2s ease-in-out;
        background:#BD5557;
        position: absolute;
        height: 500px;
        width: 960px;   
    }
</style>
<div id="div">Display out after 1 second</div>

<script>
function displayOut() {
    var x = document.getElementById('div');

    setTimeout(function(){ x.style.display='none';x.style.webkitTransition  = 'opacity 2s ease-in-out';
    x.style.transition = 'opacity 2s ease-in-out';}, 1000);


}
displayOut();
</script>
</body>
</html>





    </body>
    </html>

Answer 1

问题在于您尝试在应用转换的同时应用display:none;。

如果在css中声明它们，则无需重新应用所有css过渡属性。

function displayOut() {
    var x = document.getElementById('div');

    setTimeout(function(){ 
        x.style.opacity='0';
    }, 1000);
}

displayOut();

这是一个有效的example

使用JavaScript

1 个答案: