是否可以转换弹性框中的项目?单击"我希望所有项目都折叠"时,单击的项目除外。单击的那个应使用容器中的所有可用空间。
// only works once!
$(".item").click(function() {
$(".item").not(this).each(function() {
$(this).addClass("collapse");
});
});
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.container {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
display: flex;
flex-direction: column;
height: 100%;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
transition: all 2s;
}
.collapse {
flex-grow: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item" style="background: red">a</div>
<div class="item" style="background: green">b</div>
<div class="item" style="background: blue">c</div>
<div class="item" style="background: purple">d</div>
</div>
JSFiddle: http://jsfiddle.net/clankill3r/L8hktsgn/
flex-grow
是可动画的,但前提是该值是<number>
。但是,如果值设置为 0
,谷歌浏览器 (v41) 似乎不会触发动画。
解决此问题的方法可能是使用非常小的值 - 类似于 0.0001
:
更新的示例。
$(".item").click(function() {
$(".item").addClass("collapse");
$(this).removeClass("collapse");
});
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.container {
flex-basis: auto;
display: flex;
flex-direction: column;
height: 100%;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
transition: all 2s;
}
.collapse {
flex-grow: 0.001;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item" style="background: red">a</div>
<div class="item" style="background: green">b</div>
<div class="item" style="background: blue">c</div>
<div class="item" style="background: purple">d</div>
</div>
$(".item").click(function() {
$(this).removeClass('collapse');
$(".item").not(this).each(function() {
$(this).addClass("collapse");
});
});
您可以将弹性增长动画从 20 增加到 1
.item {
flex-grow: 20;
transition: all 1s;
}
.collapse {
flex-grow: 1;
}
http://jsfiddle.net/L8hktsgn/11/
如果你只需要一行,这可以 https://codepen.io/balvin/pen/gKrXdM,但如果你想包装它们,你可以使用 https://codepen.io/balvin/pen/wXGyYw似乎这是一个黑客,但设置width:0;flex-grow:1
它是解决方案,但是为了包装元素,您需要向浏览器明确告诉width
,因为它不知道您希望以哪种宽度包装elemements ,考虑到这一点,您只需玩 setTimeout。检查代码
您可以使用max-height
.
.item
{
max-height:100%;
}
.collapse
{
max-height: 64px;
}
http://jsfiddle.net/L8hktsgn/9/