转换附加导航栏 - CSS

Question

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

使用导航栏一切正常.我想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