JavaScript: rimuovere una classe CSS dopo un intervallo di tempo

Come rimuovere una classe CSS dopo un intervallo di tempo con JavaScript.

JavaScript di Gabriele Romanato

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