jquery - 在固定顶部导航栏和固定底部导航栏(带 Bootstrap )之间切换时如何启用 CSS 转换

Question

好的，所以我正在使用 Twitter Bootstrap 并且我有一个“navbar navbar-fixed-top”；但是，在某些页面上，我希望导航栏位于底部。作为测试，我使用 jQuery 在点击时切换类，如下所示:

function toggleMainNav() {
    $("#main-nav")
        .toggleClass("navbar-fixed-top")
        .toggleClass("navbar-fixed-bottom");
}

效果很好，当然，它是即时的。

我希望它在两者之间过渡。但是，我对 CSS 转换不是很有经验，经过几个小时的谷歌搜索、阅读和观看……我仍然无法让它工作。

这是一个 CSS 片段

#main-nav {
    -webkit-transition: all 0.5s;
}

如果我做这样的测试(以确保我使用了正确的过渡属性)

#main-nav:hover {
    background-color: #55dd66;
}

它工作正常。

(对于那些不使用 Bootstrap 的人的更多信息:navbar-fixed-top 使 top:0 和 bottom:auto 而 navbar-fixed-bottom 则相反)

提前致谢。

Answer 1

如果您不知道视口(viewport)的确切高度，则无法使用 CSS 创建从上到下的过渡。只能在 2 个值之间设置动画。

例如，您可以在以下之间转换:

top:0;
top:300px;

但无法在以下之间转换:

top:0;
bottom:0;

我为您制作了这个 fiddle 作为示例。

http://jsfiddle.net/ceFHx/

我认为使用 jquery 为您的对象设置动画是您正在寻找的解决方案。这样你就可以获得窗口高度并将你的固定导航栏设置为所需的正确偏移量。

小更新:

使用 css 是可能的，但只有 calc() 函数，而且支持得不好

http://jsfiddle.net/ceFHx/1/