Bootstrap下拉菜单可显示动画，但如何在下拉菜单上隐藏动画

时间：2019-11-12 09:15:54

标签： css bootstrap-4 css-animations

我放置了css动画下拉菜单，您可以在这里看到它：

/* CSS used here will be applied after bootstrap.css */

.dropdown .dropdown-menu {
  animation-name: example;
  animation-duration: 1s;
}

@keyframes example {
  from {
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container pt-5">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-md-12">

      <div class="dropdown mb-5">
        <button type="button" class="btn btn-primary dropdown-toggle" data-display="static" data-toggle="dropdown">Dropdown button</button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>


      <div class="btn-group dropleft dropdown mb-5">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>

      <div class="btn-group dropright dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    DropRight
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>


    </div>
  </div>
</div>

在下拉菜单上，显示动画按预期工作。但是，当下拉菜单隐藏时，如何退出动画。我想退出动画，就像下拉菜单显示的反向动画一样。请建议

2 个答案:

答案 0 :(得分：1)

当我们设置display:block或display:none时，动画将无法正常工作。

您只需要设置transform: scale(0);而不是display:none。请查看我的样式以获取更多信息。

让我知道您是否对此有疑问

希望获得帮助

.dropdown .dropdown-menu {
  animation-name: example;
  animation-duration: 1s;
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
  opacity: 1;
  transform: scale(1);
}

.dropdown .dropdown-menu{  
  transform: scale(0);     
  opacity: 0; display:
  block !important;
 }
.dropdown-menu.show {
  display: block;
  transform: scale(1);
  opacity: 1;
}

@keyframes example {
  from {
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
  }
  to {
        -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    opacity: 1;
    transform: scale(1);
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container pt-5">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-md-12">

      <div class="dropdown mb-5">
        <button type="button" class="btn btn-primary dropdown-toggle" data-display="static" data-toggle="dropdown">Dropdown button</button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>


      <div class="btn-group dropleft dropdown mb-5">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>

      <div class="btn-group dropright dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    DropRight
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>


    </div>
  </div>
</div>

答案 1 :(得分：1)

您需要从css中删除动画并制作.dropdown-menu display: block !important，因为这是一个在自举程序中隐藏和显示下拉菜单的js，因为最初您必须制作transform: scale(0); .dropdown-menu并同时对其应用transition，当您单击按钮时，在显示类出现时，现在在类.show中添加了类.dropdown-menu，使css transform: scale(1);为了解更多信息，请参见以下代码段。

.dropdown .dropdown-menu {
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
  display: block !important;
  transform: scale(0);
}
.dropdown .dropdown-menu.show{
  transform: scale(1);
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container pt-5">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-md-12">

      <div class="dropdown mb-5">
        <button type="button" class="btn btn-primary dropdown-toggle" data-display="static" data-toggle="dropdown">Dropdown button</button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>


      <div class="btn-group dropleft dropdown mb-5">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>

      <div class="btn-group dropright dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    DropRight
  </button>
        <div class="dropdown-menu">
          <!-- Dropdown menu links -->
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>


    </div>
  </div>
</div>

相关问题
最新问题