JavaScript: eseguire un'animazione o una transizione CSS a tempo

Se usate le transizioni o le animazioni 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 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 );