La transition Apposé barre de Navigation - CSS

À la transition de quelque chose, vous le déplacez d'un état à un autre. Donc, ce que vous essayez de faire est de changer une ou plusieurs des propriétés de l' .élément de navigation.

Quelles sont les propriétés que vous avez disponible à changer?

Vous ne pouvez pas modifier la hauteur, la largeur ou l'opacité, que ceux doivent rester les mêmes avant et après la transition. Si vous voulez la transition d'impliquer le mouvement, alors votre meilleur pari est de faire la transition de la position de l'élément. Nous allons faire cela avec le "top" de la propriété.

Après la transition, vos besoins en matière de navigation d'avoir 0 comme étant sa meilleure valeur. La hauteur de l'élément est 250px, nous allons donc le faire démarrer avec top: -250. Cependant, si nous faisons cela, le menu sera initialement caché. Pour remédier à cela, nous avons besoin de le faire à ignorer le haut de la valeur en supprimant le positionnement relatif.

.navigation {
    background: #fff;
    /* position: relative; */
    width: 100%;
    top: -250px;
}

Alors nous pouvons transition à 0:

#nav.affix {
    position: fixed;
    top: 0;
    z-index: 1030;
    width: 100%;
    -webkit-transition: all 2s ease-in;
    transition: all 1s ease-in;
}

RÉSULTAT:

http://jsfiddle.net/ShL4T/8/

Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

OriginalL'auteur Mark Simpson