Esistono diversi modi per rendere attiva una transizione CSS. Vediamoli insieme.
Aggiungere e rimuovere 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:
'use strict';
const test = document.querySelector( "#test" );
test.addEventListener( "click", () => {
this.classList.toggle( "fade-out" );
}, false);
Modificare direttamente gli stili con JavaScript
'use strict';
const test = document.querySelector( "#test" );
test.addEventListener( "click", () => {
const element = this;
const opacity = parseInt( window.getComputedStyle( element, null ).getPropertyValue( "opacity"), 10 );
const value = ( opacity === 1 ) ? 0 : 1;
element.style.opacity = value;
}, false);
In tutti e due i casi la transizione verrà sempre attivata per il fatto stesso che la proprietà CSS cambia di valore.