JavaScript: creare un ritardo nell'esecuzione di una transizione CSS

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