CSS3 动画 Bootstrap 3 导航栏高度变化答案

【问题标题】：CSS3 Animating Bootstrap3 Navbar Height ChangeCSS3 动画 Bootstrap 3 导航栏高度变化
【发布时间】：2014-05-14 18:07:17
【问题描述】：

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

它可以工作，但是在缩小时，尺寸会稍微变小一点，然后在其余部分设置动画。如果您查看活动导航项的背景，您可以看到这一点 - 导航栏底部和“活动”颜色背景的底部之间会出现一个小间隙。当它重新生长时，过渡非常顺利和美妙。

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

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

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案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;
}

Updated Example

【讨论】：