HTML

Question

我在Bootstrap 3导航栏中有下拉列表，我希望在打开和关闭时能够平滑地制作动画。我发现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

将此添加到您的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，而只是略微修改了“root”样式。

步骤：

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

这解决了样式/动画问题，但由于ul.dropdown-menu元素中的填充而留下了间隙。我们将通过ul上的零填充来解决它，只有当它没有打开（:not(.open) .dropdown-menu）并且为该填充设置动画时它才会看起来有点跳跃。

使用以下内容替换问题中的自定义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。

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

HTML

CSS

编辑：

2 个答案: