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 usingdisplay
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;
}
}
Two things to consider:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.