Как добавить анимацию в выпадающее меню? Я предполагаю, изменив 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>