javascript - Transition when adding class -

how apply transition when adding , remove class on scroll js below:

lastscroll = 0; $(window).on('scroll',function() {         var scroll = $(window).scrolltop();     if(scroll === 0){         $(".header").removeclass("shrink");     } else if(lastscroll - scroll > 0) {         $(".header").addclass("shrink");     } else {         $(".header").removeclass("shrink");     }     lastscroll = scroll; }); 

trying add ({'transitiontime': 200}) when add , remove class.

main fiddle: http://jsfiddle.net/9fbr320y/1/
example here: link >>

you need define transition property in css applied element (.nav):

.nav {     transition: 0.2s; } 

or in .darkheader:

.darkheader {     transition: 0.2s; } 

i think better apply original class (.nav).

fiddle: https://jsfiddle.net/lmgonzalves/9fbr320y/3/