JavaScript: rimuovere le classi CSS in modo asincrono

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:

const removeDelay = ( element, className, delay ) => {
	setTimeout(() => {
		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 );