Bootstrap 4输入组转换宽度

Question

我试图在bootstrap 4 nav中设置输入宽度的动画。输入是输入组的一部分，右侧有一个按钮。我希望隐藏输入，当单击按钮进行扩展时，扩展会在没有任何动画的情况下发生。

我将折叠输入的宽度设置为0但由于flex（我猜）没有动画。

这是一个小提琴：https://jsfiddle.net/nikolakk/1uLotz9r/

我试过了：

#search {
  input {
    transition: 1s;
  }
  &.collapsed {
    input {
      width: 0;
    }
  }
}

Answer 1

我认为你需要像这样使用最小/最大宽度：

#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;
    }
  }

}

https://jsfiddle.net/ep48qL3d/1/