JavaScript: attivare le transizioni CSS senza usare le classi

È possibile attivare le transizioni CSS anche senza utilizzare dinamicamente le classi. Infatti è sufficiente modificare gli stili CSS di un elemento tramite JavaScript.

Partiamo dai seguenti stili CSS:

#test {
	width: 150px;
	height: 150px;
	background-color: green;
	transition: all 500ms ease-out;
}

Quindi definiamo una funzione di utility per gli stili CSS:

'use strict';

const css = ( element, styles ) => {
	if( typeof styles === 'object' && element !== null ) {
		for( let prop in styles ) {
			element.style[prop] = styles[prop];
		}
	}
}