¿Cómo puedo agregar animación al menú desplegable? Supongo que modificando popperConfig, pero ¿cómo?
Por el momento, el menú desplegable tiene un estilo en línea generado, por ejemplo, position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 40px, 0px);
Por supuesto, solo puedo agregar transition: translate .3s ease , pero ¿qué pasa si quiero cambiar la dirección o algo más complejo?
En el ejemplo actual, dm-example será el menú desplegable que aparece.
HTML no diferirá mucho de sus ejemplos de 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> Para el manejo de reglas de animación CSS:
#dm-example.show - describe los estilos iniciales del bloque;
#dm-example.show .dropdown-item : describe los estilos iniciales de los elementos internos;
dm-animation - es la animación en bloque;
item-animation - es la animación de los elementos.
<!-- 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>