CSS3为Bootstrap3导航栏高度更改设置动画

我使用CSS3制作动画，当用户向下滚动到某个点时，将bootstrap3导航栏的大小缩小一点。我在这里设置了一个引导层：

这是可行的，但当缩小时，尺寸会跳小一点，然后在剩下的过程中设置动画。如果查看活动导航项的背景，可以看到这一点-导航栏底部和“活动”颜色背景底部之间会出现一个小间隙。当它重新生长时，过渡是完全平滑和美妙的

我如何纠正这个差距？我尝试向过渡属性添加背景和高度，但没有成功。此外，这是我的第一个CSS3过渡动画，所以我的方法可能是完全错误的。将

转换：

定义为我所有的3个位置是正确的，还是您可以设置一次，然后以某种方式应用它

类

smallnav

在

window.scrollTop（）>50

时添加到默认导航栏：

.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;
}

---

这是因为您只是在转换

padding top

值。您需要转换

padding top

/

padding bottom

两个值，因为它们正在更改；因此，你会改变：

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

致：

或者，您也可以使用

填充

速记来获得相同的结果

.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;
}

.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;
}