jquery - 向 Bootstrap 导航栏添加额外的动画

Question

所以我有一个 Bootstrap 导航栏，我单击它，它会为菜单的下拉菜单设置动画我想做的是，一旦它完全展开，我想添加一种反弹效果，它会继续“下降”10px，然后再回到这 10px。

一般来说，我对使用 Bootstrap 还是陌生的，所以如果有人回答了这个问题，我深表歉意，我确实先做了相当多的网络搜索。

我想知道是否有我可以使用的 BS javascript 东西，例如模态的“显示”，但我没有找到任何东西。

提前致谢。

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header" id="navBarLogo">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#myPage"><img alt="Piatt TaC logo" class="logo-small" src="images/piattConsultingLogo.jpg"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#gallery">Gallery</a></li>
                <li><a href="#pricing">Pricing</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

感谢 Gerard 让我走上正轨。我最终在我的 CSS 中使用了以下内容:

.navbar-right:after{
  animation: bounce 0.5s
}
@keyframes bounce {
    0% {
        padding-bottom: 0px;
    }
    50% {
        padding-bottom: 30px
    }
    100% {
        padding-bottom: 0px;
    }/**/
}