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;
    }/**/
}

添加额外的动画到bootstrap导航栏

1 个答案: