Question

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

它正在工作，但是当缩小时，尺寸会稍微缩小一点，然后动画剩下的部分。如果查看活动导航项的背景，您可以看到这一点 - 导航栏底部和“活动”颜色背景底部之间出现一个小间隙。当它重新增长时，过渡是完全平稳的。精彩。

我如何纠正这个差距？我尝试将背景和高度添加到过渡属性但它不起作用。另外 - 这是我的第一个CSS3过渡动画 - 所以我的方法可能完全错误。让transition:定义所有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;
}

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

Updated Example

CSS3动画Bootstrap 3 Navbar高度变化

1 个答案: