Grâce aux transitions CSS 3 on voit de plus en plus d’effets de survol ou au clic. Généralement on utilise les mêmes effets quand on survol et quand on quitte un élément, ou quand l’élément apparait/disparait. Mais dans certains cas on souhaite avoir un effet d’apparition mais qu’un effet de disparition soit instantané. Par exemple un menu qui apparaît quand on scroll doit disparaître sans jouer son animation quand on remonte dans la page. Il existe une façon très simple de coder ce genre d’effet, en utilisant la surcharge des règles CSS. La règle de transition est appliquée quand une classe ou autre condition (hover, active…) est ajoutée. Quand la règle est retirée c’est la règle par défaut qui s’applique.

#menu {
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 10;

    top: -50px;
    transition: top 0s ease;
}

#menu.sticky {
    transition: top 0.6s ease;
    top: 0;
}

Avec le code précédant, quand on ajoute la classe « sticky » pour afficher le menu il y aura une animation de 0.6s, et quand la classe sera retirée l’animation durera 0s. En combinant différentes règles de transition on peut complètement changer un effet on/off, la seule limite devient l’imagination!