JavaScript: attivare una transizione CSS dopo un determinato 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:

'use strict';

const removeClassWithDelay = ( 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:

removeClassWithDelay( document.querySelector( '#test' ), 'visible', 2000 );