我已经放了 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>
在下拉菜单中显示动画按预期工作。但是当下拉菜单隐藏时如何做退出动画。我想退出动画看起来像下拉菜单显示的反向动画。请建议
最佳答案
你需要从你的 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>
关于css - Bootstrap 下拉菜单显示动画有效但如何在下拉菜单隐藏时退出动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58815435/