对 Bootstrap 5 进行动画处理下拉列表-解网

问：

我正在尝试使用 CSS 对右对齐的 Bootstrap 下拉列表进行动画处理，但无法让它工作。我以为通过将属性设置为应用于元素的属性，它会起作用，但事实并非如此。transitionwidth

我可以看到元素的宽度最初在浏览器检查器中设置为 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,-0.14,.27,1.55);
    width: 0;
}

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

css css-animations bootstrap-5

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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);
}

对 Bootstrap 5 进行动画处理下拉列表

Animating Bootstrap 5 dropdown

评论

评论