Come posso attivare una transizione CSS con JavaScript?

Esistono diversi modi per rendere attiva una transizione CSS. Vediamoli insieme.

Aggiungere una classe con JavaScript

Se abbiamo definito la seguente transizione CSS:

#test {
	transition: opacity 600ms ease-out;
}

E la seguente classe CSS:

#test.fade-out {
	opacity: 0;
}

Possiamo usare JavaScript in questo modo:

var test = document.querySelector( "#test" );
test.addEventListener( "click", function() {
	var cls = this.className;
	if( cls !== "fade-out" ) {
		this.className = "fade-out";
	} else {
		this.className = "";
	}
}, false);

Modificare direttamente gli stili con JavaScript

var test = document.querySelector( "#test" );
test.addEventListener( "click", function() {
	var element = this;
	var opacity = parseInt( window.getComputedStyle( element, null ).getPropertyValue( "opacity"), 10 );
	if( opacity == 1 ) {
		element.style.opacity = 0;
	} else {
		element.style.opacity = 1;
	}
}, false);

In tutti e due i casi la transizione verrà sempre attivata per il fatto stesso che la proprietà CSS cambia di valore.