html - 底层 CSS 转换完成时字体粗细向上移动

Question

这是网站:

www.wearethefirehouse.com/phasetest

如果您慢慢滚动，您会注意到一旦菜单栏完全不透明，nav li 元素就会全部从 Enzo 300 跳起来(如在没有导航背景的页面加载时看到的)，到 Enzo 600……很难说这个尺寸是否属于整个重量等级，但它们肯定会让人发胖。

仍然不确定我最终会在审美层面上使用哪种，但我怎样才能阻止它转向更胖的体重呢？在所有与导航相关的 CSS 中，(除非我遗漏了什么)，我只使用了 font-weight: 600，而不是 300。所以它应该是全部 300 或全部 600，过渡前和过渡后。

.navbar-default {
    border-color: transparent;
    background-color: #222;
}

.navbar-default .navbar-brand {
    font-family: "ff-enzo-web", sans-serif;
    font-size: 18px;
    color: #FC6C00;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
    color: #fec503;
}

.navbar-default .navbar-collapse {
    border-color: rgba(255,255,255,.02);        
}

.navbar-default .navbar-toggle {
    border-color: #FC6C00;
    background-color: #FC6C00;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #FC6C00;
}

.navbar-default .nav li a {
    text-transform: uppercase;
    font-family: "ff-enzo-web",sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    transition: color .5s ease;
}

.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
    outline: 0;
    color: #FC6C00;
    font-size: 16px;
    font-weight: 600;
}

.navbar-default .navbar-nav>.active>a {
    border-radius: 0;
    color: #363636;
    background-color: #FC6C00;
    font-weight: 600;
}

.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #FFFFFF;
    background-color: #FC6C00;
    font-weight: 600;
}

注意:我拥有的任何其他与导航相关的 CSS 只是为了响应断点而对上述内容进行的调整，但问题存在于全 Angular ，所以我认为不是这样。

Answer 1

我没有看到滚动字体有任何重量变化，但是我确实注意到导航栏收缩时由于填充变化导致的突然跳跃，似乎你有一个适当的过渡但这对填充属性不起作用因为没有指定持续时间。

对 .navbar-default block 的调整使填充和 bg 颜色的过渡都有效，请注意填充后添加的时间延迟 -

transition: padding 0.5s, background-color .7s ease-in-out;