移动平滑关闭动画引导菜单下拉菜单

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）