动画 Bootstrap 5 下拉列表

问题描述

我正在尝试使用 CSS 为右对齐的 Bootstrap 下拉列表设置动画，但无法使其正常工作。我认为通过将 transition 属性设置为应用于元素的 width 属性，它会起作用，但它没有。

我可以看到元素的宽度在我的浏览器检查器中最初设置为 0，并在菜单可见后设置为“自动”。如果我手动调整宽度，我可以看到应用了过渡，但由于某种原因，显示菜单时不会发生这种情况。我试过使用像素值而不是“自动”而不做任何更改。

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

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,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>

解决方法

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

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,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>

已针对 Firefox 修复

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