javascript - 添加类时的过渡

Question

在此滚动 js 上添加和删除类时如何应用 Transition如下:

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

主 fiddle :http://jsfiddle.net/9fbr320y/1/
示例如下:Link >>

Answer 1

您需要在应用于元素 (.nav) 的 CSS 中定义 transition 属性:

.nav {
    transition: 0.2s;
}

或者在.darkHeader中:

.darkHeader {
    transition: 0.2s;
}

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

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