Javascript Transition flex-grow 在 flexbox 中的项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29625037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transition flex-grow of items in a flexbox
提问by clankill3r
Is it possible to transition the items in an flexbox? When you click I want all items to collapse except the one that is clicked. The one that is clicked should use all available space from the container.
是否可以转换 flexbox 中的项目？当您单击时，我希望所有项目都折叠起来，除了被单击的项目。单击的那个应该使用容器中的所有可用空间。
// 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/
JSFiddle：http: //jsfiddle.net/clankill3r/L8hktsgn/
回答by Hashem Qolami
flex-growisanimatablebut only if the value is a <number>. However it seems that Google Chrome (v41) doesn't trigger the animation if the value is set to 0.
flex-grow是可动画的，但仅当值为 a 时<number>。但是，如果该值设置为 ，Google Chrome (v41) 似乎不会触发动画0。
A workaround for this could be to use a very small value instead — something like 0.0001:
对此的解决方法可能是使用一个非常小的值——例如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>回答by Ashot Khanamiryan
$(".item").click(function() {
$(this).removeClass('collapse');
$(".item").not(this).each(function() {
$(this).addClass("collapse");
});
});
and you can animate flex-grow from 20 to 1
你可以将 flex-grow 从 20 动画化到 1
.item {
flex-grow: 20;
transition: all 1s;
}
.collapse {
flex-grow: 1;
}
回答by Rouby
You can work with max-height.
您可以使用max-height.
.item
{
max-height:100%;
}
.collapse
{
max-height: 64px;
}
回答by John Balvin Arias
If you want only one row this could work https://codepen.io/balvin/pen/gKrXdMbut if you want to wrap them you could use https://codepen.io/balvin/pen/wXGyYwSeems that it's a hack, but setting width:0;flex-grow:1it's the solution, but in order to wrap the elements, you need to explicity tell widthto the browser, because it does not know at which width you want the elemements to wrap, and with that in mind you just play with setTimeout. Check the codes
如果你只想要一行，这可以工作https://codepen.io/balvin/pen/gKrXdM但如果你想包装它们，你可以使用https://codepen.io/balvin/pen/wXGyYw似乎这是一个黑客，但设置width:0;flex-grow:1它是解决方案，但是为了包装元素，您需要明确告诉width浏览器，因为它不知道您希望元素包装的宽度，并且考虑到这一点，您只需使用 setTimeout。检查代码
