无法通过更改宽度或 flex-basis 来隐藏 flex 项目 [英] Unable to hide flex items by changing width or flex-basis

问题描述

我要达到这个效果:

在默认状态下，有四个按钮.其中之一是移动"按钮.

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

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

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

这是HTML代码:

 
<span class="multiselect-controls-container medium-theme"><button type="submit" class="btn btn-multi-select multi-edit"><span class="multiselect-text">编辑</span><button type="submit" class="btn btn-multi-select multi-copy"><span class="multiselect-text">复制</span><button type="submit" class="btn btn-multi-select multi-move" onclick="expandMe();"><span class="multiselect-text">移动</span><span class="multi-move-input">到 <input class="multi-move-to-target" type='text'></input></span><button type="submit" class="btn btn-multi-select multi-delete">Delete</button><span class='icon icon-cross close-multiselect-controls'></span></span>

和css(less)代码:

btn-multi-select {显示:弹性；宽度:100px；}.multi-move-input {弹性基础:0px；//溢出:隐藏；弹性增长:0；弹性收缩:1；}.扩展{&.多移动{宽度:150px；}.multi-move-input {弹性增长:1；弹性基础:自动；}}.multi-move-to-target {宽度:30px；高度:20px；颜色:黑色;}

Javascript:

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

代码也可以在这里找到:http://codepen.io/kongakong/pen/amdrJZ

解决方案

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

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

从 0 开始，然后将其扩展为某个更大的数字.该元素只会扩展到足以容纳内容.

.multi-move-input {显示:inline-flex；最大宽度:0；过渡:.5s；溢出:隐藏；}.扩展{&.multi-move { }.multi-move-input {最大宽度:200px；过渡:1s；}}

修改后的代码笔

需要考虑的两件事:

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

I want to achieve this effect:

In the default state, there are four buttons. One of them is a 'Move' button.

When a user clicks on it, I want to expand the button and show additional text and input.

However I am unable to achieve the 'default state'. The 'To ' always appears. I have tried flex-basis and width: 0px but there is no effect, like so

How can I hide a flex box element without using display:none. The main reason for not using display is because I want to expand the widget with some css animation on width.

Here is the HTML code:

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

and css(less) code:

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');
}

The code is also available here: http://codepen.io/kongakong/pen/amdrJZ

解决方案

How can I hide a flex box element without using display:none? The main reason for not using display is because I want to expand the widget with some css animation on width.

You can use max-width, which is an animatable property.

Start it at 0, then have it expand to some extra large number. The element will only expand enough to fit content.

.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

Two things to consider:

1. I've only focused on the hide/show transition, which is your question. But note that the input is inside the button's clickable area. This means when you try to input data it will fire the transition and close the button. This can be fixed with a bit of re-structuring (HTML) and/or re-targeting (CSS).
2. Button elements as flex containers may cause unexpected behavior in some browsers. See this post: Flexbox not working on <button> element in some browsers

这篇关于无法通过更改宽度或 flex-basis 来隐藏 flex 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！