Se usate le transizioni CSS3 potreste voler rimuovere una classe dopo un certo periodo di tempo per innescare l'effetto visuale. La soluzione è semplice.
Possiamo implementare la seguente funzione di utility:
function removeDelay( element, className, delay ) {
setTimeout(function() {
element.classList.remove( className );
}, delay);
}
Dato il seguente codice CSS:
#test {
opacity: 0;
transition: opacity 500ms ease-out;
}
#test.visible {
opacity: 1;
}
possiamo utilizzare la funzione in questo modo:
removeDelay( document.querySelector( "#test" ), "visible", 2000 );