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下拉菜單動畫

回答

相關問題