Flexbox中项目的过渡弹性增长 [英] Transition flex-grow of items in a flexbox

问题描述

是否可以转换弹性框中的项目？
当您点击我想要所有项目，除了被点击的项目折叠。
单击的那个应该使用容器中的所有可用空间。

  // only works once！$ ）.click（function（）{$（。item）。not（this）.each（function（）{$（this）.addClass（collapse）;}）;}）;  

  html，body {width：100％;高度：100％; margin：0; padding：0; border：0; overflow：hidden;}。container {flex-grow：1; flex-shrink：0; flex-basis：auto;显示：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 =itemstyle =background：red> a< / div> < div class =itemstyle =background：green> b< / div> < div class =itemstyle =background：blue> c< / div> < div class =itemstyle =background：purple> d< / div>< / div>   
 
 
 JSFiddle： http://jsfiddle.net/clankill3r/L8hktsgn/ 
解决方案
  flex-grow   是可动画，但前提是该值是 < number>  。但是，如果值设置为 0 
，Google Chrome（v41）似乎不会触发动画。
 
 
 
  
 
 
 
  
 更新示例 。
 
 
 
 
 
 
  $（。item）。click（function（）{$（。item）。addClass（collapse）; $（this）.removeClass（collapse）;}）;  
 
  html，body {width：100％;高度：100％; margin：0; padding：0; border：0; overflow：hidden; } .container {flex-basis：auto;显示：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 =itemstyle =background：red> a< / div> < div class =itemstyle =background：green> b< / div> < div class =itemstyle =background：blue> c< / div> < div class =itemstyle =background：purple> d< / div>< / div>   
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.



// 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 is animatable but 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.

A workaround for this could be to use a very small value instead — something like 0.0001:

Updated example.



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





                        
这篇关于Flexbox中项目的过渡弹性增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！