我试图在bootstrap 4 nav中设置输入宽度的动画。输入是输入组的一部分,右侧有一个按钮。我希望隐藏输入,当单击按钮进行扩展时,扩展会在没有任何动画的情况下发生。
我将折叠输入的宽度设置为0但由于flex(我猜)没有动画。
这是一个小提琴:https://jsfiddle.net/nikolakk/1uLotz9r/
我试过了:
#search {
input {
transition: 1s;
}
&.collapsed {
input {
width: 0;
}
}
}
答案 0 :(得分:0)
我认为你需要像这样使用最小/最大宽度:
#search {
.form-control {
transition: max-width 1s, min-width 1s;
max-width: 180px;
min-width: 180px;
}
&.collapsed {
.form-control {
max-width: 0;
min-width: 0;
width: 0;
}
}
}