无法通过更改宽度或 flex-basis 来隐藏 flex 项目

Question

我想达到这个效果：

在默认状态下，有四个按钮。 其中之一是“移动”按钮。

当用户单击它时，我想展开按钮并显示其他文本和输入。

但是我无法达到“默认状态”。 'To' 总是出现。 我试过flex-basis和width: 0px但没有效果，像这样

如何在不使用display:none情况下隐藏弹性框元素。 不使用display主要原因是因为我想在宽度上使用一些 css 动画来扩展小部件。

这是 HTML 代码：

  <div class="multiselect-controls">
    <span class="multiselect-controls-container medium-theme">
      <button type="submit" class="btn btn-multi-select multi-edit">
        <span class="multiselect-text">Edit</span>
      </button>
      <button type="submit" class="btn btn-multi-select multi-copy">
        <span class="multiselect-text">Copy</span>
      </button>
      <button type="submit" class="btn btn-multi-select multi-move" onclick="expandMe();">
        <span class="multiselect-text">Move</span>
        <span class="multi-move-input">
          to <input class="multi-move-to-target" type='text'></input>
        </span>
      </button>
      <button type="submit" class="btn btn-multi-select multi-delete">Delete</button>
      <span class='icon icon-cross close-multiselect-controls'></span>
    </span>
  </div>

和css(less)代码：

btn-multi-select {
  display:flex;
  width: 100px;
}

.multi-move-input {
  flex-basis: 0px;
  // overflow: hidden;
  flex-grow: 0;
  flex-shrink: 1;
}

.expanded {
  &.multi-move {
    width: 150px;
  }
  .multi-move-input {
    flex-grow: 1;
    flex-basis: auto;
  }
}

.multi-move-to-target {
  width: 30px;
  height: 20px;
  color: black;
}

Javascript：

function expandMe(event) {
  $('.multi-move').toggleClass('expanded');
}

该代码也可在此处获得： http : //codepen.io/kongakong/pen/amdrJZ

Answer 1

如何在不使用display:none情况下隐藏弹性框元素？ 不使用display主要原因是因为我想在宽度上使用一些 css 动画来扩展小部件。

您可以使用max-width ，这是一个 可动画的属性。

从0开始，然后将其扩展为一些额外的大数。 该元素只会扩展到足以容纳内容。

.multi-move-input {
  display: inline-flex;
  max-width: 0;
  transition: .5s;
  overflow: hidden;
}

.expanded {
  &.multi-move { }
  .multi-move-input {
    max-width: 200px;
    transition: 1s;
  }
}

修订代码笔

需要考虑的两件事：

1. 我只关注隐藏/显示过渡，这是你的问题。 但请注意，输入位于按钮的可点击区域内。 这意味着当您尝试输入数据时，它将触发转换并关闭按钮。 这可以通过一些重新构建 (HTML) 和/或重新定位 (CSS) 来解决。
2. 按钮元素作为弹性容器可能会在某些浏览器中导致意外行为。 请参阅这篇文章： Flexbox 在某些浏览器中无法处理 <button> 元素