添加课程时的过渡

Question

如何在下面的滚动js 上添加和删除类时应用转换：

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;
});

在添加和删除类时尝试添加此({'transitionTime': 200})。

主要小提琴：http://jsfiddle.net/9fbr320y/1/
示例：Link＆gt;＆gt;

Answer 1

您需要在应用于元素（transition）的CSS中定义.nav属性：

.nav {
    transition: 0.2s;
}

或.darkHeader：

.darkHeader {
    transition: 0.2s;
}

我认为最好将其应用于原始类（.nav）。

FIDDLE：https://jsfiddle.net/lmgonzalves/9fbr320y/3/