CSS: transizioni e classi dinamiche

CSS: transizioni e classi dinamiche

A differenza di quanto comunemente si creda, le transizioni CSS avvengono quando lo stato di un elemento cambia in relazione ai suoi stili iniziali. Per questo motivo non è necessario utilizzare esclusivamente gli stati CSS degli elementi (:hover, :active ecc. ). Si possono utilizzare anche le classi CSS aggiunte o rimosse in modo dinamico.

Consideriamo l'esempio di un sottomenu:


ul.submenu {
	width: 10em;
	position: absolute;
	top: -1000em;
	left: 0;
	-moz-transition: top 500ms ease-in;
	-webkit-transition: top 500ms ease-in;
	-ms-transition: top 500ms ease-in;
		transition: top 500ms ease-in;
}

Se passate con il mouse sopra la voce di lista che lo contiene e provate a modificare la sua proprietà top non ottenete alcun effetto poiché per gli stati di un elemento tradizionali potete operare solo sull'elemento su cui è stata specificata la transizione.

Ma se specificate una classe CSS:


ul.submenu.visible {
	top: 2em; /* altezza del menu di navigazione */
}

e la aggiungete e rimuovete dinamicamente:


$( "li.has-submenu", "#menu" ).hover(function() {
	$( this ).find( "ul.submenu" ).addClass( "visible" );
}, function() {
	$( this ).find( "ul.submenu" ).removeClass( "visible" );
});

ottenete invece l'effetto sperato.

Torna su