如何使用Javascript触发CSS3渐入效果

How to trigger CSS3 fade-in effect using Javascript?

本文关键字：CSS3 何使用 Javascript 触发      更新时间：2023-09-26

我已经使用纯Javascript实现了渐入效果，但我渴望更原生的东西，比如使用CSS3。是否有一种方法来触发CSS淡出效果从Javascript?

谢谢。

HTML:

<div id="foo" class="hidden">Hello!</div>
CSS: 

div {
    -webkit-transition: opacity 1s linear;
}
.hidden {
    opacity: 0;
}

JS: 

setTimeout(function() {
    document.getElementById('foo').className = '';
}, 1000);
http://jsfiddle.net/RYgsA/

给你

HTML 

<div id="box"></div>
CSS 

#box {
    width: 100px;
    height: 100px;
    background-color: black;
    opacity: 1;
    -webkit-transition:opacity 0.5s linear;
    -moz-transition:opacity 0.5s linear;
    -o-transition:opacity 0.5s linear;
    -ms-transition:opacity 0.5s linear; 
    transition:opacity 0.5s linear;
}

JS 

function fadde() {
        var box = document.getElementById('box');
        box.style.opacity = (box.style.opacity == 1) ? 0 : 1;   
}
setInterval(fadde, 1000);
在

的例子https://jsfiddle.net/z54a75os/

相关文章：