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

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，这是一个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

两件事情要考虑：

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