Transition flex-grow of items in a flexbox

Question

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/

Answer 1

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>

Answer 2

$(".item").click(function() {     $(this).removeClass('collapse');     $(".item").not(this).each(function() {         $(this).addClass("collapse");         });   }); 

and you can animate flex-grow from 20 to 1

.item {     flex-grow: 20;     transition: all 1s; }  .collapse {     flex-grow: 1;  } 

http://jsfiddle.net/L8hktsgn/11/