無法通過更改寬度或 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> 元素