如何向 Bootstrap 下拉菜单添加动画?
How can I add animation to Bootstrap dropdowns?
如何向下拉菜单添加动画?我假设通过修改 popperConfig,但是如何?
目前下拉菜单具有生成的内联样式,例如position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 40px, 0px);
当然我可以只加transition: translate .3s ease
,但是如果我想改变方向或者更复杂的东西怎么办?
在当前示例中,dm-example
将是显示的下拉菜单。
HTML 与其 Bootstrap5 示例没有太大区别:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul id="dm-example" class="dropdown-menu " aria-labelledby="dropdownMenuButton1 ">
<li><a class="dropdown-item " href="# ">Action</a></li>
<li><a class="dropdown-item " href="# ">Another action</a></li>
<li><a class="dropdown-item " href="# ">Something else here</a></li>
</ul>
</div>
对于CSS动画规则处理:
#dm-example.show
- 描述块的初始样式;
#dm-example.show .dropdown-item
- 描述内部项目的初始样式;
dm-animation
- 是块上的动画;
item-animation
- 是物品上的动画。
<!-- Animate dropdown -->
<style>
#dm-example.show {
position: fixed;
animation-name: dm-animation;
animation-duration: 2s;
}
#dm-example.show .dropdown-item {
margin-bottom: 0;
animation-name: item-animation;
animation-duration: 2s;
}
@keyframes dm-animation {
0% {
margin-top: 0px;
}
50% {
margin-top: 25px;
}
75% {
margin-top: 5px;
}
100% {
margin-top: 0px;
}
}
@keyframes item-animation {
0% {
margin-bottom: 0px;
}
50% {
margin-bottom: 25px;
}
75% {
margin-bottom: 5px;
}
100% {
margin-bottom: 0px;
}
}
</style>
如何向下拉菜单添加动画?我假设通过修改 popperConfig,但是如何?
目前下拉菜单具有生成的内联样式,例如position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 40px, 0px);
当然我可以只加transition: translate .3s ease
,但是如果我想改变方向或者更复杂的东西怎么办?
在当前示例中,dm-example
将是显示的下拉菜单。
HTML 与其 Bootstrap5 示例没有太大区别:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul id="dm-example" class="dropdown-menu " aria-labelledby="dropdownMenuButton1 ">
<li><a class="dropdown-item " href="# ">Action</a></li>
<li><a class="dropdown-item " href="# ">Another action</a></li>
<li><a class="dropdown-item " href="# ">Something else here</a></li>
</ul>
</div>
对于CSS动画规则处理:
#dm-example.show
- 描述块的初始样式;
#dm-example.show .dropdown-item
- 描述内部项目的初始样式;
dm-animation
- 是块上的动画;
item-animation
- 是物品上的动画。
<!-- Animate dropdown -->
<style>
#dm-example.show {
position: fixed;
animation-name: dm-animation;
animation-duration: 2s;
}
#dm-example.show .dropdown-item {
margin-bottom: 0;
animation-name: item-animation;
animation-duration: 2s;
}
@keyframes dm-animation {
0% {
margin-top: 0px;
}
50% {
margin-top: 25px;
}
75% {
margin-top: 5px;
}
100% {
margin-top: 0px;
}
}
@keyframes item-animation {
0% {
margin-bottom: 0px;
}
50% {
margin-bottom: 25px;
}
75% {
margin-bottom: 5px;
}
100% {
margin-bottom: 0px;
}
}
</style>