css - Bootstrap 下拉菜单显示动画有效但如何在下拉菜单隐藏时退出动画

Question

我已经放了 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>

在下拉菜单中显示动画按预期工作。但是当下拉菜单隐藏时如何做退出动画。我想退出动画看起来像下拉菜单显示的反向动画。请建议

Answer 1

你需要从你的 css 中删除动画并制作你的 .dropdown-menu display: block !important 因为它是一个在 bootstrap 中隐藏和显示下拉列表的 js ，因为最初您必须将 transform: scale(0); 转换为 .dropdown-menu 并对其应用 transition 并且当您单击在按钮上，类 .show 添加了类 .dropdown-menu 现在当显示类出现时制作 css transform: scale(1); for更多了解请参阅以下代码段。

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