Question

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

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

我的CSS＆amp; HTML：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

编辑：@Chiller的答案很棒，但它错过了一件小事。要在外部按下或折叠导航栏时正确关闭下拉菜单，您必须添加以下Javascript代码（jQuery）：

＆＃13;

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

＆＃13;

Answer 1

我管理创建自定义slideUp / slideDown函数来实现目标

请参阅下面的代码段：

＆＃13;

$('.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);
  }

});

＆＃13;

@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;
  }
}

＆＃13;

<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>

＆＃13;

Bootstrap CSS下拉菜单动画

1 个答案: