html - 移动 Bootstrap 菜单下拉菜单中的平滑关闭动画

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 block 中的第一个改为如下所示:

.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

将它添加到您的 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 )