Bootstrap CSS下拉菜单动画

我想通过CSS为我的下拉菜单设置动画，以显示淡入和淡出动画。我使用bootstrap，它管理我的导航栏，并在移动设备上淡入和淡出。通过CSS，我可以为导航栏内的下拉菜单设置淡入淡出动画效果。但是，当折叠这些菜单时，根本没有动画。我还做了此行为的视频： https://youtu.be/YcWzsH5aKbw Bootstrap CSS下拉菜单动画

的jsfiddle：https://jsfiddle.net/mvhvcuo9/2/ 你必须降低输出视图，直到导航栏崩溃，因为我有错误仅仅是存在于倒塌的模式。折叠按钮目前是黑色的，但这不会改变任何行为。

我的CSS & HTML：

.dropdown .dropdown-menu { 
 
    -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s; 
 
    -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s; 
 
    -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s; 
 
    -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s; 
 
    transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s; 
 
    max-height: 0; 
 
    display: block; 
 
    overflow: hidden; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
} 
 

 
.dropdown.open .dropdown-menu { 
 
    -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s; 
 
    -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s; 
 
    -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s; 
 
    -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s; 
 
    transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s; 
 
    max-height: 190px; 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<body> 
 
<div class="container"> 
 
<nav class="navbar navbar-custom" "=""> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
    <button style="background: url(https://cdn.pixabay.com/photo/2016/04/27/16/16/generic-button-1357003_960_720.png)" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
 
    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">censor</a> </div> 
 
    <div id="navbar" class="collapse navbar-collapse"> <a href="http://censor.censor.censor-censor.de/index.htm" target="_blank"><button type="button" class="btn btn-warning navbar-right"> censor</button></a> <ul class="nav navbar-nav"><li class="dropdown" <!!="=:"> 
 
    <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li> 
 
    <li class="dropdown" <!!="=:"> 
 
    <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li> 
 
    <li class="dropdown" <!!="=:"> 
 
    <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li> 
 
    <li class="dropdown" <!!="=:"> 
 
    <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li> 
 
    <ul> </ul></ul></div> </div> </nav> 
 
</nav> 
 
</div> 
 
</div> 
 
</body> 
 
    </nav>

编辑：@冷水机的答案是伟大的，但它错过了一个小东西。为了使您的下拉菜单中选择正确关闭压在它之外或折叠导航栏的时候，你必须添加下面的JavaScript代码（jQuery的）：

$(document).click(function(){ 
 
    $(".dropdown-menu").slideUp(300); 
 
}); 
 

 
$(".dropdown-menu").click(function(e){ 
 
    e.stopPropagation(); 
 
});

来源

2017-04-30 Scunkaneli

@Chiller：你改变的东西 - 他们没有做任何exept语法修正，对吧？仍然有我的问题:( – Scunkaneli

我刚刚为我和其他人看了你到目前为止的片段..但它不显示像你放的视频的问题..我建议你做一个片段，清楚地显示你有问题 – Chiller

好的，谢谢！我可以用JSFiddle重现我的问题，这里是：https：//jsfiddle.net/mvhvcuo9/ – Scunkaneli

我manged创建一个自定义效果基本show /了slideDown函数来实现目标

下面

见片段：

$('.navbar-nav a').on('click', function() { 
 
    
 
    $('.dropdown').children('.dropdown-menu').slideUp(300); 
 
    
 
    if ($(this).parent().hasClass("open")) { 
 
    $(this).next('.dropdown-menu').slideUp(300); 
 
    } else { 
 
    $(this).next('.dropdown-menu').slideDown(300); 
 
    } 
 

 
});

@media screen and (max-width: 767px) { 
 
    .navbar-nav .dropdown-menu { 
 
    display: none; 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    } 
 
    .dropdown-menu>li>a { 
 
    color: #777!important; 
 
    padding: 5px 15px 5px 25px!important; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 

 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 

 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

来源

2017-05-08 10:05:05 Chiller

它的工作完美，非常感谢你！一个问题：关闭导航栏时，如何关闭导航栏内的所有下拉菜单？如果你现在这样做，动画是有点bug的。谢谢！ :) 不能顺便说一句给予好评，太少的声誉:( – Scunkaneli

我意识到我可能描述的有点不知所云。 1.打开导航栏，打开一个下拉菜单 2.折叠导航栏，然后再次打开导航栏（下拉菜单仍然打开） 3.按下打开的下拉菜单（它将关闭并再次打开）如果下拉菜单与导航栏一起崩溃，则问题不会出现我认为，也许您有另一个好主意？ – Scunkaneli

我刚刚注意到，您的解决方案也解决了我在下拉菜单中遇到的另一个问题：在移动最大的情况下，显示了5个项目，在桌面上最多6.现在显示所有项目:) 顺便说一句，我认为上述的东西，我认为这是相关的 - 使下拉我当点击任何地方（桌面）时，不会崩溃。这是一样的吗？ – Scunkaneli

Bootstrap CSS下拉菜单动画

回答

相关问题