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.