Animazioni jQuery contro transizioni CSS

Falsi miti circondano le transizioni CSS3 e per sfatare questi miti occorre un'analisi comparativa ed un esempio pratico che mostrino i limiti di questa soluzione rispetto alle animazioni jQuery.

Se abbiamo un menu dropdown come il seguente:

<nav id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Articles</a>
            
            <ul>
                <li><a href="#">Article 1</a></li>
                <li><a href="#">Article 2</a></li>
                <li><a href="#">Article 3</a></li>
            </ul>
            
        </li>
        <li>
            <a href="#">Contacts</a>
        </li>
    </ul>
</nav>

appare chiaro come sia impossibile mostrare il sottomenu utilizzando una transizione CSS. Infatti la transizione dovrebbe applicarsi al sottomenu ma essere attivata dal passaggio del mouse sulla voce che la contiene.

Le transizioni CSS operano solo sull'elemento su cui vengono specificate e non sui suoi discendenti. Quindi se vogliamo modificare l'opacità del sottomenu creando un effetto di assolvenza e di dissolvenza dobbiamo utilizzare jQuery:

$('a', '#navigation').each(function() {
    var $a = $(this);
    if ($a.next().is('ul')) {
        var $ul = $a.next();
        var $li = $a.parent();
        $li.hover(function() {
            $ul.stop(true, true).animate({
                opacity: 1
            }, 600);
        }, function() {

            $ul.stop(true, true).animate({
                opacity: 0
            }, 600);
        });
    }
});​

Ovviamente il discorso è radicalmente diverso con le animazioni CSS. In questo caso è sufficiente utilizzare una classe CSS apposita in cui specificare l'animazione e associarla al sottomenu tramite jQuery (e in seguito rimuoverla).