动画引导程序5下拉列表

Question

我正试图用CSS制作一个右对齐的Bootstrap下拉菜单，但无法使其正常工作。我认为将transition属性设置为应用于元素的width属性会起作用，但事实并非如此。

我可以看到，在我的浏览器检查器中，元素的宽度最初被设置为0，并被设置为"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/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>

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>

已修复firefox

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