移動平滑關閉動畫引導菜單下拉菜單

Question

我在Bootstrap 3 navbar-collapse中有下拉列表，我想在打開和關閉時順利地進行動畫製作。當在寬度較大的設備上查看時，我發現JavaScript和CSS animation解決方案都很棒。但是當它在手機中崩潰時，關閉下拉列表看起來很糟糕。當它崩潰時，它回到看起來像一個標準的下拉列表。

In this JSFiddle，請嘗試縮小輸出窗口，使菜單摺疊到移動模式。然後，點擊「漢堡」圖標並打開並關閉「Some Stuff」下拉菜單。正如你所看到的，打開時看起來很棒，但關閉時很糟糕。我已經嘗試了很多修補，但無濟於事。有關在移動模式下如何使其平滑的任何想法？

注意：我更喜歡CSS答案，但如果這就是它的要求，我會使用JavaScript。

HTML

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a></li> 
     <li> 
      <div class="navbar-nav-divider"></div> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="margin-bottom: 0;"> 
          Some Stuff <span class="caret"></span> 
         </a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Option 1</a></li> 
      <li><a href="#">Option 2</a></li> 
      <li><a href="#">Option 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

CSS

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

    max-height: 0; 
    display: block; 
    overflow: hidden; 
    opacity: 0; 
    visibility: hidden; 
} 

.dropdown.open .dropdown-menu { 
    -webkit-transition: max-height 0.3s, opacity 0.2s, visibility 0s; 
    -moz-transition: max-height 0.3s, opacity 0.2s, visibility 0s; 
    -ms-transition: max-height 0.3s, opacity 0.2s, visibility 0s; 
    -o-transition: max-height 0.3s, opacity 0.2s, visibility 0s; 
    transition: max-height 0.3s, opacity 0.2s, visibility 0s; 

    max-height: 120px; 
    opacity: 1; 
    visibility: visible; 
} 

---

編輯：

我可以跳過關閉動畫解決這個問題，而在移動模式，所以它至少沒有按」看起來很可怕。不過，我並不認爲這是一個解決方案，只是一種解決方法。爲了實現它，我做了我的第一次兩個CSS塊看起來像這個：

.dropdown .dropdown-menu { 
    max-height: 0; 
    display: block; 
    overflow: hidden; 
    opacity: 0; 
    visibility: hidden; 
} 
@media (min-width: 768px) { 
    .dropdown .dropdown-menu { 
    -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s; 
    } 
} 

Answer 1

使用@ AndrewBone的，如果你沒有訪問引導3 LESS源代碼，他的回答是插件和播放解決方案。我的答案稍微有點高性能，因爲它只增加了很少的CSS，而只對「根」樣式稍作修改。

步驟：

1. 轉到navbar.less。
2. 查找選擇器.open .dropdown-menu的每個參考，並從中刪除.open，這樣選擇器只會說.dropdown-menu。這將允許CSS應用於移動下拉菜單，同時打開和關閉。

這解決了造型/動畫問題，但由於ul.dropdown-menu元素中的填充造成間隙。我們將通過在ul上打零填充（:not(.open) .dropdown-menu）並對填充進行動畫處理來解決這個問題，所以它看起來不會太過激動。

1. 將問題中的自定義CSS替換爲以下內容。

   .navbar-nav .dropdown-menu { 
       -webkit-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; 
       -moz-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; 
       -ms-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; 
       -o-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; 
       transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; 
       max-height: 0; 
       display: block; 
       overflow: hidden; 
       opacity: 0; 
       visibility: hidden; 
   } 
   .navbar-nav .dropdown.open .dropdown-menu { 
       -webkit-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; 
       -moz-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; 
       -ms-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; 
       -o-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; 
       transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; 
       max-height: 120px; 
       opacity: 1; 
       visibility: visible; 
   } 
   .navbar-nav .dropdown:not(.open) .dropdown-menu { 
       padding: 0 !important; 
   } 
   

就是這樣！現在，我們在移動和全屏模式下都可以使用流暢的CSS動畫，並且只需要處理最少的額外CSS。

Answer 2

添加到您的CSS所以它保持它的風格，即使它關閉。

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

這是在行動（Fiddle）