Css 动画引导5下拉列表

我正试图用CSS制作一个右对齐的引导下拉列表，但无法让它工作。我认为通过设置

transition

属性来应用于元素的

width

属性，它会起作用，但不会

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

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

div.dropdown>.btn{
变换：变换0.8s三次贝塞尔（0，-0.14,27,1.55）；
变换：旋转（90度）；
}
div.dropdown>.btn.show{
变换：旋转（270度）；
}
div.dropdown>。下拉菜单{
过渡：宽度0.8s三次贝塞尔（0，-0.14,27,1.55）；
宽度：0；
}
div.dropdown>.btn.show+。下拉菜单{
宽度：自动；
}

++

您可以尝试此解决方案。 过渡中的动画是您自己的

div.dropdown>.btn{
变换：变换0.8s三次贝塞尔（0，-0.14,27,1.55）；
变换：旋转（90度）；
}
div.dropdown>.btn.show{
变换：旋转（270度）；
}
div.dropdown>。下拉菜单{
显示：继承；
转换：转换（69px，19px）scaleX（0）；
过渡：所有0.8s三次贝塞尔（0，-0.14,27,1.55）；
变换原点：左；
左：0；
}
div.dropdown>.btn.show+.dropdown菜单{
显示：继承；
转换：转换（69px，19px）scaleX（1）；
}

++

转换：translate（69px，19px）scaleX（0）这些值从何而来？引导添加带有内联样式的
transform:translate（69px，19px）
；nedd需要修复下拉列表<代码>scaleX（0）

用于从0到1的水平过渡。我只在它收缩时看到动画，而不是在它展开固定firefox过渡时看到动画。试试看。+1表示努力，现在可以在Firefox中使用了。但是menu div上的翻译量不是固定的，它取决于按钮的内容。