javascript - 平滑过渡标题导航类

Question

我创建了这个 site带有使用 jQuery Ui 转换的 header 和 twitter bootstrap .这个想法是有两个类 .navbar-transparent 和 .navbar-white 我使用 .switchClass() jQuery Ui Effects 提供的函数，当页面的滚动位置不在顶部时，转换两个类中的变化。

但是问题是，现在的导航系统，我认为技术术语是“janky”。过渡不平滑，当从透明变为白色时，字体颜色根本不会过渡，只是扑通一声变成黑色。

这个 shopify 主题 Retina / Austin通过 css 转换在使转换平滑方面做得很好。

.header{
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}

这是我的 javascript 代码:

mindful_matter.header = function() {
    if ($(".navbar-transparent").length == 0) return false;
    var callback = function() {
        var scrolled_val = $(document).scrollTop().valueOf();
        if (scrolled_val > 0) {
            $(".navbar").switchClass("navbar-transparent", "navbar-white");
        } else {
            $(".navbar").switchClass("navbar-white", "navbar-transparent");
        }
    }
    callback();
    $(window).scroll(callback);
}

有什么方法可以让过渡更顺畅吗？使用我已有的设置？当我有两个类需要相互交换时，我可以使用 css 转换吗？

Answer 1

.navbar{
    transition: background-color 500ms ease;
}