向Bootstrap Navbar Affix添加动画的问题

Question

正如您在This Demo中看到的那样，我正在尝试将附加功能添加到Bootstrap Navbar中，但是这个词缀会突然出现在页面上，所以我想在词缀中添加一些动画。我尝试通过像

这样的CSS缓动来做到这一点

.navbar{
-webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
 transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */    
}

但这不是在做这个工作！你可以告诉我如何添加一些动画来加贴吗？

Answer 1

首先你应该添加一个更大的顶部偏移，这样动画几乎不会在开始时触发，你可以对它进行预测。

如果您希望导航栏在滚动时变为附加内容时执行某些动画播放，则您的css应该应用于.affix或.navbar.affix而不是导航栏。

我不太了解立方体，所以我改变了动画的例子。 Here is a demo