Bootstrap 4 输入组转换宽度

Question

我正在尝试为 bootstrap 4 导航中的输入宽度设置动画。输入是输入组的一部分，右侧有一个按钮。我希望隐藏输入并在单击按钮展开时展开，但展开时没有任何动画。

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

这是一个fiddle：https://jsfiddle.net/nikolakk/1uLotz9r/

我试过了：

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

Answer 1

我认为你需要像这样使用 min/max 宽度：

#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/