twitter-bootstrap 过渡附加导航栏 - CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20185001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transitioning Affixed Navigation bar - CSS
提问by Unknown User
I've a got a fixed navigation bar using the affix()of Twitter Bootstrap 3.
我有一个使用affix()Twitter Bootstrap 3的固定导航栏。
Everything is working fine with the navigation bar. I wanted to add a transitionin the appearance of the navigation bar.
导航栏一切正常。我想transition在导航栏的外观中添加一个。
When the user scrolls the page the navigation bar is being displayed instantly. I'd like to animate it.
当用户滚动页面时，会立即显示导航栏。我想动画它。
Tried with -webkit-transition: all 1s ease-inbut the result was for the width of the navigation bar.
尝试过，-webkit-transition: all 1s ease-in但结果是导航栏的宽度。
Here's the FIDDLE.
这是FIDDLE。
Please help me in animating it when the user scrolls down.
当用户向下滚动时，请帮我制作动画。
回答by Mark Simpson
To transition something, you move it from one state to another. So what you are trying to do is change one or more of the properties of the .navigation element.
要转换某物，您可以将它从一种状态移动到另一种状态。因此，您要做的是更改 .navigation 元素的一个或多个属性。
What properties do you have available to change?
您可以更改哪些属性？
You can't change the height, width, or opacity, as those need to remain the same before and after the transition. If you want the transition to involve movement, then your best bet is to transition the position of the element. Let's do this with the "top" property.
您不能更改高度、宽度或不透明度，因为它们需要在过渡前后保持不变。如果您希望过渡涉及移动，那么最好的办法是过渡元素的位置。让我们用“top”属性来做这件事。
After the transition, your navigation needs to have 0as its top value. The height of the element is 250px, so let's make it start with top: -250. However, if we do this, the menu will initially be hidden. To fix that, we need to make it ignore the top value by removing the relative positioning.
转换后，您的导航需要0作为其最高值。元素的高度是 250px，所以让我们让它从top: -250. 但是，如果我们这样做，菜单最初将被隐藏。为了解决这个问题，我们需要通过移除相对定位使其忽略最高值。
.navigation {
background: #fff;
/* position: relative; */
width: 100%;
top: -250px;
}
Then we can transition it to 0:
然后我们可以将其转换为 0：
#nav.affix {
position: fixed;
top: 0;
z-index: 1030;
width: 100%;
-webkit-transition: all 2s ease-in;
transition: all 1s ease-in;
}
RESULT:
http://jsfiddle.net/ShL4T/8/
结果：http:
//jsfiddle.net/ShL4T/8/
Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
参考：https: //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
回答by user5936810
I could not get this to work until I implicitly added position:staticto .navigation.
在我隐式添加position:static到.navigation.
