无法通过更改宽度或弹性基础来隐藏弹性项目答案

【问题标题】：Unable to hide flex items by changing width or flex-basis无法通过更改宽度或弹性基础来隐藏弹性项目
【发布时间】：2017-01-21 17:18:29
【问题描述】：

我想实现这个效果：

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

当用户点击它时，我想展开按钮并显示额外的文本和输入。

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

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

这是 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

【问题讨论】：

codepen.io/anon/pen/vXLPQm
@Michael_B 感谢您的出色回答！如果您可以将您的评论扩展为答案，我将投票并接受。
@Michael_B - .addClass('expanded') 而不是切换按钮会更适合您的答案。

标签： javascript jquery html css flexbox

【解决方案1】：

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

您可以使用max-width，即animatable property。

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

revised codepen

需要考虑的两件事：

我只关注隐藏/显示转换，这是您的问题。但请注意，输入位于按钮的可点击区域内。这意味着当您尝试输入数据时，它将触发转换并关闭按钮。这可以通过一些重构 (HTML) 和/或重新定位 (CSS) 来解决。
作为弹性容器的按钮元素可能会在某些浏览器中导致意外行为。看到这个帖子：Flexbox not working on <button> element in some browsers

【讨论】：