是否可以转换弹性盒中的项目？
当您单击时，我希望除单击的项目之外的所有项目都折叠起来。
单击的空间应使用容器中的所有可用空间。
// 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/ http://jsfiddle.net/clankill3r/L8hktsgn/
flex-grow is可动画的 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties但仅当该值为 a<number> https://developer.mozilla.org/en-US/docs/Web/CSS/number#Interpolation。然而，如果该值设置为，Google Chrome (v41) 似乎不会触发动画0.
解决这个问题的方法可能是使用一个非常小的值——比如0.0001:
更新的示例 http://jsfiddle.net/L8hktsgn/13/.
$(".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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
