Bootstrap CSS 下拉菜单动画答案

【问题标题】：Bootstrap CSS dropdown-menu AnimationBootstrap CSS 下拉菜单动画
【发布时间】：2017-09-28 04:34:04
【问题描述】：

我正在尝试通过 CSS 为下拉菜单设置动画以显示淡入和淡出动画。我正在使用引导程序，它管理我的导航栏及其在移动设备上的淡入和淡出。通过 CSS，我能够为导航栏中的下拉菜单制作淡入动画。但是，当折叠这些菜单时，根本没有动画。我还制作了这种行为的视频： https://youtu.be/YcWzsH5aKbw

JSFiddle：https://jsfiddle.net/mvhvcuo9/2/ 您必须减少输出视图，直到导航栏折叠，因为我遇到的错误只是在折叠模式下出现。折叠按钮当前是黑色的，但这不会改变任何行为。

我的 CSS 和 HTML：

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

.dropdown.open .dropdown-menu {
  -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0s;
  max-height: 190px;
  display: block;
  opacity: 1;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container">
<nav class="navbar navbar-custom" "="">
  <div class="container-fluid"> 
  <div class="navbar-header"> 
  <button style="background: url(https://cdn.pixabay.com/photo/2016/04/27/16/16/generic-button-1357003_960_720.png)" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
  <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> 
  <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">censor</a> </div>
  <div id="navbar" class="collapse navbar-collapse"> <a href="http://censor.censor.censor-censor.de/index.htm" target="_blank"><button type="button" class="btn btn-warning navbar-right"> censor</button></a> <ul class="nav navbar-nav"><li class="dropdown" <!!="=:">
  <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li>
  <li class="dropdown" <!!="=:">
  <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li>
  <li class="dropdown" <!!="=:">
  <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li>
  <li class="dropdown" <!!="=:">
  <a href="http://censor.censor-censor.net/censor/" title="censor" class="dropdown-toggle" data-toggle="dropdown">test&nbsp;<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLable"><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/">test</a></li><li><a href="http://censor.censor-censor.net/test/test/">test</a></li><li><a href="http://censor.censor-censor.net/testtest/">TEst</a></li><li><a href="http://censor.censor-censor.net/test/">Test</a></li></ul></li>
  <ul> </ul></ul></div> </div> </nav>
</nav>
</div>
</div>
</body>
     </nav>

编辑：@Chiller 的回答很棒，但它遗漏了一点。要在按下下拉菜单或折叠导航栏时正确关闭下拉菜单，您必须添加以下 Javascript 代码 (jQuery)：

$(document).click(function(){
  $(".dropdown-menu").slideUp(300);
});

$(".dropdown-menu").click(function(e){
  e.stopPropagation();
});

【问题讨论】：

@Chiller：你改变的东西——除了语法更正，他们没有做任何事情，对吧？仍然有我的问题:(
我刚刚为我和其他人制作了一个 sn-p 以查看您到目前为止所获得的内容..但它并没有像您放置的视频那样显示问题..我建议您制作一个 sn -p 清楚地显示您遇到的问题
好的，谢谢！我能够用 JSFiddle 重现我的问题。这是：jsfiddle.net/mvhvcuo9
现在它也可以在网站上截取的代码中运行。不再需要 jsfiddle。
Scunkaneli 看看我的回答 ;)

标签： html css twitter-bootstrap

【解决方案1】：

我设法创建了一个自定义的 slideUp/slideDown 函数来实现目标

参见下面的 sn-p：

$('.navbar-nav a').on('click', function() {
 
  $('.dropdown').children('.dropdown-menu').slideUp(300);
  
  if ($(this).parent().hasClass("open")) {
    $(this).next('.dropdown-menu').slideUp(300);
  } else {
    $(this).next('.dropdown-menu').slideDown(300);
  }

});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>

          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>

      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

【讨论】：

运行完美，非常感谢！一个问题：关闭导航栏时如何让关闭导航栏中的所有下拉菜单？如果你现在这样做，动画就会有点错误。谢谢！ :) 不能投票顺便说一句，声誉太低 :(
我意识到我描述的可能有点难以理解。 1.打开导航栏，打开一个下拉菜单 2.折叠导航栏，然后再次打开导航栏（下拉菜单仍然打开） 3.按下打开的下拉菜单（它将关闭并再次打开）如果下拉菜单与导航栏一起折叠，我认为问题不会存在。也许您还有另一个好主意？
我刚刚注意到，您的解决方案还解决了我在下拉菜单中遇到的另一个问题：On mobile max。最多显示 5 个项目，在桌面上。 6. 现在所有项目都显示了:) 顺便说一句，我上面描述的事情，我认为这是相关的 - 单击下拉菜单之外的任何位置（桌面）时使下拉菜单折叠。这是一样的吗？
无论如何，我想我自己想通了（见上文）:)
@Scunkaneli 因为它是一个自定义功能......需要添加一些东西才能完美工作......无论如何我相信你设法解决了这个问题，我很高兴它有帮助:) ...我会支持你而不是：p