我试图使用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>
transform: translate(69px, 19px) scaleX(0);
这些值从哪里来的? - miken32transform: translate(69px, 19px)
,需要修复下拉菜单的位置。scaleX(0)
用于水平过渡,从0到1。 - riky1