CSS3动画Bootstrap3导航条高度改变

Question

我使用CSS3动画来缩小bootstrap3导航条的大小，当用户向下滚动到某一点时。我在这里设置了一个bootply: http://www.bootply.com/IeYZRkb0k2

它是工作的，但是当收缩时，大小跳小一点，然后在剩下的过程中动画。如果你观察活动导航项的背景，你就能看到这一点——在导航条的底部和"活动"颜色背景的底部之间出现了一个小间隙。当它重新生长时，过渡是完全平滑的。太棒了。

我如何纠正这个差距?我尝试添加背景和高度过渡属性，但它没有工作。此外-这是我的第一个CSS3过渡动画-所以我的方法可能是完全错误的。像我这样定义所有3个地方的transition:是正确的吗?或者你可以设置一次，然后以某种方式应用它?

当window.scrollTop() > 50:

时，默认导航栏中添加smallnav类

.smallnav {
  min-height: 40px;
  height: 40px;
}
.smallnav .navbar-brand {
  padding-top: 10px;
  padding-bottom: 10px;
  height: 40px;
}
.smallnav .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
}

转换:

.navbar-default {
  // tried adding height here as well, didn't work
  -webkit-transition: min-height 0.3s ease; 
  -moz-transition: min-height 0.3s ease;
  -ms-transition: min-height 0.3s ease;
  -o-transition: min-height 0.3s ease;
  transition: min-height 0.3s ease;
}
.navbar-default .navbar-brand {
  // added min-height & background, also didn't work
  -webkit-transition: padding-top 0.3s ease, height 0.3s ease;
  -moz-transition: padding-top 0.3s ease, height 0.3s ease;
  -ms-transition: padding-top 0.3s ease, height 0.3s ease;
  -o-transition: padding-top 0.3s ease, height 0.3s ease;
  transition: padding-top 0.3s ease, height 0.3s ease;
}
.navbar-default .navbar-nav > li > a {
  -webkit-transition: padding-top 0.3s ease;
  -moz-transition: padding-top 0.3s ease;
  -ms-transition: padding-top 0.3s ease;
  -o-transition: padding-top 0.3s ease;
  transition: padding-top 0.3s ease;
}

Answer 1

这是因为您只是在转换padding-top值。你需要转换padding-top/padding-bottom值，因为它们正在变化;因此，您可以更改:

.navbar-default .navbar-nav > li > a {
    transition: padding-top 0.3s ease;
}

:

.navbar-default .navbar-nav > li > a {
    transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
}

或者，您也可以对相同的结果使用padding简写。

.navbar-default .navbar-nav > li > a {
    -webkit-transition: padding 0.3s ease;
    -moz-transition: padding 0.3s ease;
    -ms-transition: padding 0.3s ease;
    -o-transition: padding 0.3s ease;
    transition: padding 0.3s ease;
}

更新示例