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:
'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.