如何使用Javascript触发CSS3淡入效果？ [英] How to trigger CSS3 fade-in effect using Javascript?

问题描述

我已经实现了一个淡入的效果使用纯JavaScript，但我渴望更原生，像使用CSS3。有没有办法从Javascript中触发CSS淡入效果？

I've implemented a fade-in effect using pure Javascript, but I yearn for something more native, like using CSS3. Is there a way to trigger the CSS fade-in effect from 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/

这篇关于如何使用Javascript触发CSS3淡入效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！