在flexbox中过渡flex-grow的项目

是否可以在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; } 

  
 
a
 
b
 
c
 
d
  

JSFiddle： http ： //jsfiddle.net/clankill3r/L8hktsgn/

Answer 1

flex-grow 是可动画的，但仅当值为才可动画 。 但是，如果值设置为0 ，Google Chrome（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; } 

  
 
a
 
b
 
c
 
d
  

Answer 2

 $(".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/

Answer 3

你可以使用max-height 。

 .item { max-height:100%; } .collapse { max-height: 64px; } 

http://jsfiddle.net/L8hktsgn/9/

Answer 4

如果你只需要一行，这可以工作https://codepen.io/balvin/pen/gKrXdM，但如果你想包装它们你可以使用https://codepen.io/balvin/pen/wXGyYw似乎这是一个黑客，但设置width:0;flex-grow:1这是解决方案，但是为了包装元素，你需要明确告诉浏览器width ，因为它不知道你想要元素包装的宽度，以及考虑到这一点，你只需要使用setTimeout。 检查代码