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

Question

我在 Bootstrap 3 导航栏折叠中有下拉列表，我希望在打开和关闭时平滑地制作动画。我发现JavaScript 和CSS animation 解决方案在更大宽度的设备上查看时效果很好。但是当它在移动设备中折叠时，关闭下拉列表看起来很糟糕。虽然它正在折叠，但它看起来像一个标准的下拉列表。

In this JSFiddle，尝试缩小输出窗口，以便菜单折叠到移动模式。然后，单击“汉堡包”图标并打开和关闭“一些东西”下拉菜单。如您所见，打开时看起来很棒，但关闭时却很糟糕。我尝试了很多修补都无济于事。知道如何在移动模式下使其流畅吗？

注意：我更喜欢 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

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

Answer 2

如果您无法访问 Bootstrap 3 LESS 源代码，请使用 @AndrewBone 的解决方案，因为他的答案是即插即用。我的回答稍微好一点，因为它添加了非常少的 CSS，同时只对“根”样式进行了轻微修改。

步骤：

1. 转到navbar.less。
2. 找到选择器.open .dropdown-menu 的每个引用并从中删除.open，以便选择器只显示.dropdown-menu。这将允许 CSS 在打开和关闭时应用于移动下拉菜单。

这解决了样式/动画问题，但由于ul.dropdown-menu 元素中的填充而留下了空隙。我们将通过仅在未打开时 (:not(.open) .dropdown-menu) 在 ul 上设置零填充来解决此问题，并为该填充设置动画，使其看起来不会跳动。

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 最少。