モバイルビューでドロップダウンへのトランジション効果を与える

Question

私のウェブサイトにドロップダウントランジションエフェクトを試してみたい。私は与えようとしました

transition: all 2s ease-in-out 

しかし結果は出ていません。私は、いくつかのトランジション効果を持つモバイルビューでホバー中にドロップダウンを表示したい。私は現在、ブートストラップのクラスのいくつかを使用しています。 は、ここに私の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> 

です。どのクラスで私が教えてくれるか教えてもらえますか？私は、マウスを動かしたり、クリックしたときにドロップダウンをするために、トランジションを与える必要があります。以下

sub-menuと呼ばれるドロップダウンクラスのCSSです：

@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

ブートストラップを使用すると、デフォルトでdisplay:noneで、ホバーにそれがdisplay:blockですが、CSSルールに従ってtransitionプロパティがonに動作しないドロップダウン与えるので、これは、 show hide状態です。

他のエフェクトで独自のドロップダウンを作成するか、プラグインを使用する必要があります。