JavaScript: rimuovere una classe CSS dopo un intervallo di tempo

JavaScript: rimuovere una classe CSS dopo un intervallo di tempo

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

Torna su