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>

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

标签： cssbootstrap-4css-animations

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