JavaScript: rimuovere una classe CSS dopo un intervallo di tempo

Short link

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 );