转换附加导航栏 - CSS [英] Transitioning Affixed Navigation bar - CSS

问题描述

我有一个固定的导航栏，使用Twitter Bootstrap 3的 affix（）。

I've a got a fixed navigation bar using the affix() of Twitter Bootstrap 3.

一切工作正常与导航栏。我想在导航栏的外观中添加转换

Everything is working fine with the navigation bar. I wanted to add a transition in the appearance of the navigation bar.

当用户滚动页面时，导航栏栏即时显示。

When the user scrolls the page the navigation bar is being displayed instantly. I'd like to animate it.

尝试使用 -webkit-transition：all 1s ease-in

这里是 FIDDLE 。

请帮助我在用户向下滚动时进行动画。

Please help me in animating it when the user scrolls down.

推荐答案

要转换某些内容，请将它从一个状态移动到另一个状态。所以你要做的是改变.navigation元素的一个或多个属性。

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.

你有什么属性可以改变？

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.

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

After the transition, your navigation needs to have 0 as 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.

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

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

Then we can transition it to 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

这篇关于转换附加导航栏 - CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！