使用动画效果制作Bootstrap 5下拉菜单

Question

我试图使用CSS为右对齐的Bootstrap下拉菜单添加动画效果，但无法使其正常工作。我尝试将transition属性设置为应用于元素的width属性，但不起作用。

我可以在浏览器检查器中看到元素的宽度最初设置为0，在菜单可见后设置为"auto"。如果我手动调整宽度，我可以看到过渡效果被应用，但由于某种原因，当菜单显示时它不会发生变化。我尝试使用像素值而不是"auto"，但没有任何变化。

我希望看到菜单以与菜单按钮旋转相同的速度向右侧"滑出"。这可能吗？

div.dropdown > .btn {
    transition: transform 0.8s cubic-bezier(0,-0.14,.27,1.55);
    transform: rotate(90deg);
}

div.dropdown > .btn.show {
    transform: rotate(270deg);
}

div.dropdown > .dropdown-menu {
    transition: width 0.8s cubic-bezier(0,-0.14,.27,1.55);
    width: 0;
}

div.dropdown > .btn.show + .dropdown-menu {
    width: auto;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

<div class="dropdown dropend p-4">
    <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown">
        ++
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
</div>

- miken32

Answer 1

你可以尝试这个解决方案。 过渡动画是自己制作的。

div.dropdown > .btn {
    transition: transform 0.8s cubic-bezier(0,-0.14,.27,1.55);
    transform: rotate(90deg);
}

div.dropdown > .btn.show {
    transform: rotate(270deg);
}

div.dropdown>.dropdown-menu {    
    display: inherit;
    transform: translate(69px, 19px) scaleX(0);
    transition: all 0.8s cubic-bezier(0,-0.14,.27,1.55);
    transform-origin:left;
    left: 0;
}

div.dropdown>.btn.show+.dropdown-menu {
    display: inherit;
    transform: translate(69px, 19px) scaleX(1);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>

<div class="dropdown dropend p-4">
    <button class="btn btn-secondary" type="button" data-bs-toggle="dropdown">
        ++
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
</div>

已修复火狐浏览器的问题

div.dropdown>.btn.show+.dropdown-menu {
    display: inherit;
    transform: translate(69px, 19px) scaleX(1);
}

- riky1

---

transform: translate(69px, 19px) scaleX(0); 这些值从哪里来的？ - miken32

Bootstrap在样式内联中添加了transform: translate(69px, 19px)，需要修复下拉菜单的位置。scaleX(0)用于水平过渡，从0到1。 - riky1

当它收缩时，我只看到动画，而不是当它扩展时。 - miken32

修复了 Firefox 转换问题。请尝试。 - riky1

加1分鼓励，现在在Firefox中可以正常工作。但是菜单div上的翻译不是固定的数量，它取决于按钮的内容。 - miken32