转换附加导航栏 – CSS

我有一个固定的导航栏使用Twitter Bootstrap 3的affix() 。

使用导航栏一切正常。我想在导航栏的外观中添加一个transition 。

当用户滚动页面时，导航栏立即显示。我想给它制作动画。

尝试使用-webkit-transition: all 1s ease-in但结果是导航栏的宽度。

这是FIDDLE 。

当用户向下滚动时，请帮助我设置动画。

要转换某些内容，请将其从一种状态移动到另一种状态。因此，您要做的是更改.navigation元素的一个或多个属性。

您可以更改哪些属性？

您无法更改高度，宽度或不透明度，因为在转换之前和之后需要保持不变。如果您希望转换涉及移动，那么您最好的选择是转换元素的位置。让我们用“顶部”属性来做这件事。

转换后，您的导航需要将0作为其最高值。元素的高度为250px，所以让它从top: -250开始top: -250 。但是，如果我们这样做，菜单最初将被隐藏。要解决这个问题，我们需要通过删除相对定位来忽略顶部值。

 .navigation { background: #fff; /* position: relative; */ width: 100%; top: -250px; }

然后我们可以将其转换为0：

 #nav.affix { position: fixed; top: 0; z-index: 1030; width: 100%; -webkit-transition: all 2s ease-in; transition: all 1s ease-in; }

参考： https ： //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

在我隐式地将position:static添加到.navigation之前，我无法使用.navigation 。