Question

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

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

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

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

这是FIDDLE。

请在用户向下滚动时帮助我制作动画。

Answer 1

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

您可以更改哪些属性？

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

转换后，您的导航需要以0作为其最高值。元素的高度为250px，所以让它以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;
}

结果：
http://jsfiddle.net/ShL4T/8/

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

Answer 2

在我将position:static隐式添加到.navigation之前，我无法解决此问题。

转换附加导航栏 - CSS

2 个答案: