JavaScript: gestire le modifiche agli stili nelle transizioni CSS

Short link

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.

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.