如何向 Bootstrap 下拉菜单添加动画？

Question

如何向下拉菜单添加动画？我假设通过修改 popperConfig，但是如何？

目前下拉菜单具有生成的内联样式，例如position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 40px, 0px);

当然我可以只加transition: translate .3s ease，但是如果我想改变方向或者更复杂的东西怎么办？

Answer 1

在当前示例中，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>

如何向 Bootstrap 下拉菜单添加动画？

How can I add animation to Bootstrap dropdowns?

javascript

twitter-bootstrap

dropdown

bootstrap-5

popper.js