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.