在javascript中切换类时淡入淡出

我相信我的问题很容易解决。我想在标题可见时应用淡入，在标题不可见时应用淡出。所以我不想那么粗鲁。我试过使用

header.removeClass（'clearHeader'）.addClass（“darkHeader”）.fadeIn（慢）但这对我没有帮助。我还尝试在CSS中添加转换，但这对我也没有帮助

Javascript:

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

 header {
  width:100%;
  height: 70px;
  position: fixed;
  z-index:999;
  background-color:#fff;
  box-sizing:border-box;
}
header nav {
    display:inline-block;
    float:right;
    line-height:70px;
    }
header nav a {
    margin-left: 25px;
    font-weight: 700;
    font-size: 18px;
    }
header nav a:hover {
    text-shadow:1px 1px 1px red;
    }
.clearHeader{
    display:none;
    opacity:0;
    width: 100%;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}
.darkHeader {
    display:visible;
    opacity:1;
    z-index:999;
}

CSS:

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

 header {
  width:100%;
  height: 70px;
  position: fixed;
  z-index:999;
  background-color:#fff;
  box-sizing:border-box;
}
header nav {
    display:inline-block;
    float:right;
    line-height:70px;
    }
header nav a {
    margin-left: 25px;
    font-weight: 700;
    font-size: 18px;
    }
header nav a:hover {
    text-shadow:1px 1px 1px red;
    }
.clearHeader{
    display:none;
    opacity:0;
    width: 100%;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}
.darkHeader {
    display:visible;
    opacity:1;
    z-index:999;
}

尝试从css中删除不透明度并显示可见代码，然后尝试fadeIn和fadeOut，如：

if (scroll >= 50) {
    header.removeClass('clearHeader').addClass("darkHeader").fadeIn('slow');
} else {
    header.removeClass("darkHeader").addClass('clearHeader').fadeOut('slow');
}

要解决您的问题，只需使用jQuery的
animate
。它可以平滑地设置您想要设置动画的任何css属性的动画。因此，您可以：

CSS:

（仅设置默认值）

JS:

淡出，同样的事情，但不透明度1淡入。不过，您可能需要注释掉类的显示部分以进行测试，因为它可能会影响所有的行为。
它是空的codepenI从darkHeader中删除不透明度，而不是从clearHeader中删除不透明度，它就可以工作了。非常感谢。