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?
Thanks.
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);
here you go
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);
example at
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.