, um den Übergangseffekt zu DropDown während der mobilen Ansicht geben

Question

Ich möchte Dropdown-Übergangseffekt in meiner Website versuchen. Ich habe versucht zu geben

transition: all 2s ease-in-out 

aber es gibt kein Ergebnis. Ich möchte das Drop-down-Menü während des Schwebens in der mobilen Ansicht mit einem Übergangseffekt anzeigen. Ich benutze derzeit einige der Bootstrap-Klasse. Hier ist mein HTML

   <!-- Brand and toggle get grouped for better mobile display --> 

        <div class="navbar-header pull-left"> 
         <!-- <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="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch"> 
        <img src="bild/Schweizerisch-Japanische-Gesellschaft.png" class="img-responsive showabove"></a> 
        <a class="navbar-brand" href="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch"> 
        <img src="bild/logomiddle.png" class="img-responsive showinbetween"></a> 
        <a class="navbar-brand" href="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch"> 
        <img src="bild/logosmall.png" class="showless"></a> 

        </div> 
        <div class="navbar-header pull-right"> 
         <ul class="nav pull-left"> 
         <!-- <li class="navbar-text pull-left">User Name</li> --> 
         <li class="dropdown pull-right"> 
         <div id="lang_sel"><ul><li><a href="#" class="lang_sel_sel icl-de">DE</a> <ul><li class="icl-en"><a href="#">EN</a></li></ul></li></ul><span class="sj-down-arrow">▾</span></div>       </li> 
         </ul> 

         <!-- Required bootstrap placeholder for the collapsed menu --> 
         <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
        </div> 

       <!-- Collect the nav links, forms, and other content for toggling --> 
        <div class="navbar-collapse navbar-right collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 21px;"> 


           <ul id="menu-menu-1" class="nav navbar-nav"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-20"><a href="#">Startseite</a></li> 
      <li id="menu-item-580" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-580"><a href="#">Uber Uns</a> 
    <ul class="sub-menu"> 
<li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-175"><a href="#">Ziel und Zweck</a> 
     <ul class="sub-menu"> 
    <li id="menu-item-226" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-226"><a href="#">testing</a></li> 
</ul> 
</li> 
<li id="menu-item-183" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-183"><a href="#">Leitbild</a></li> 
<li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204"><a href="#">Entstehungsgeschichte</a></li> 
<li id="menu-item-219" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-219"><a href="#">Vorstand</a></li> 
<li id="menu-item-218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218"><a href="#">Aktueller Jahresbericht</a></li> 
<li id="menu-item-217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-217"><a href="#">Archiv Jahresberichte</a></li> 
</ul> 
</li> 
<li id="menu-item-581" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-581"><a href="#">Veranstaltungen</a> 
<ul class="sub-menu"> 
<li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248"><a href="#">Jubiläum 2014</a></li> 
<li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a href=#">Aktuelle Veranstaltungen</a></li> 
<li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247"><a href="#">Vergangene Veranstaltungen</a></li> 
<li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246"><a href="#">Fotogalerie</a></li> 
</ul> 
</li> 
<li id="menu-item-582" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-582"><a href="#">Mitgliedschaft</a> 
<ul class="sub-menu"> 
<li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232"><a href="#">Aufnahme-Bedingungen</a></li> 
<li id="menu-item-233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-233"><a href="#">Beitrittsgesuch</a></li> 
</ul> 
</li> 
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="#">Varia</a></li> 
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="#">Links</a></li> 
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href=#">Kontakt</a></li> 
</ul>    
          </div> 

      </div> 

     </div> 

sorry für meine Sprache. Kann mir jemand sagen in welcher Klasse sollte ich einen Übergang geben müssen, um das Dropdown im Hover oder während der angeklickten Aktion zu machen.

unten ist CSS für Drop-Down-Klasse namens sub-menu:

@media (max-width: 900px) 
    .navbar-nav ul { 
    position: static; 
    visibility: visible; 
    opacity: 1; 
    margin: 0; 
    background: none; 
    box-shadow: none; 
    display: none; 
    } 

@media (max-width: 900px) 
    .navbar-nav { 
    margin: 0; 
    padding: 0; 
    position: fixed; 
    left: 0; width: 100%; 
    z-index: 10; 
    background: #f8f6f6; 
    overflow: visible; 
    } 

@media (max-width: 900px) 
    .navbar-nav li { 
    background: #fff; 
    position: static; 
    display: block; 
    float: none; 
    border: 0; 
    margin: 0; 
    border-bottom: 1px solid #fff; 
    border-top: 1px solid #999; 
    } 

Answer 1

Dies liegt daran, Bootstrap gibt Ihnen die Dropdown display:none ist standardmäßig und auf schweben ist es display:block aber nach CSS-Regel transition Eigenschaft nicht funktioniert nicht auf zeige verbergen Zustand.

Sie müssen Ihr eigenes Dropdown mit einem anderen Effekt erstellen oder Sie können ein Plugin verwenden.