无法通过更改宽度或弹性基础来隐藏弹性项目
问题描述:
我想达到此效果:无法通过更改宽度或弹性基础来隐藏弹性项目
在默认状态下,有四个按钮。其中之一是“移动”按钮。
当用户点击它,我想扩大按钮,显示额外的文本和输入。
但是我无法实现 '默认状态'。 '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
答
如何在不使用
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;
}
}
两件事情要考虑:
- 我只专注于隐藏/显示过渡,这是你的问题。但请注意,输入位于按钮的可点击区域内。这意味着当你尝试输入数据时,它会触发转换并关闭按钮。这可以通过一些重构(HTML)和/或重新定位(CSS)来解决。
- 作为柔性容器的按钮元素可能会在某些浏览器中导致意外的行为。看到这个帖子:Flexbox not working on <button> element in some browsers
http://codepen.io/anon/pen/vXLPQm –
@Michael_B感谢伟大的答案!如果您可以将您的评论扩展为答案,我会赞成并接受。 –
@Michael_B - '。addClass('expanded')'而不是切换将更好地为您的答案。 – misterManSam