I have CSS code as follows
#example { opacity: 0; transition: opacity 500ms; }
#example.visible { opacity: 1; }
using this JavaScript to make it visible
setTimeout(function () {
document.getElementById('example').className = 'visible'
}, 500)
As you can see, my intention is for a half second delay to pass before the div is made visible.
If I was to continue using JavaScript, I would need to use clearTimeout
in case the 'make visible' requirement was cancelled before the first 500ms.
Is there a way to use CSS for this initial delay instead? That would allow me to simplify my JavaScript.