我放置了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>
在下拉菜单上,显示动画按预期工作。但是,当下拉菜单隐藏时,如何退出动画。我想退出动画,就像下拉菜单显示的反向动画一样。请建议