Transition flex-grow d’éléments dans une flexbox

Est-il possible de faire la transition des éléments dans une flexbox? Lorsque vous cliquez sur, je souhaite que tous les éléments soient réduits, sauf celui sur lequel vous avez cliqué. Celui sur lequel l’utilisateur a cliqué doit utiliser tout l’espace disponible du conteneur.

// 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/

flex-grow est animable mais seulement si la valeur est un . Cependant, il semble que Google Chrome (v41) ne déclenche pas l’animation si la valeur est définie sur 0 .

Une solution de contournement pour cela pourrait être d’utiliser une très petite valeur à la place – quelque chose comme 0.0001 :

Exemple mis à jour .

 $(".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
 $(".item").click(function() { $(this).removeClass('collapse'); $(".item").not(this).each(function() { $(this).addClass("collapse"); }); }); 

et vous pouvez animer flex-grow de 20 à 1

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

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

Vous pouvez travailler avec max-height .

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

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

Si vous voulez une seule ligne, cela pourrait fonctionner https://codepen.io/balvin/pen/gKrXdM mais si vous voulez les envelopper, vous pouvez utiliser https://codepen.io/balvin/pen/wXGyYw. , mais réglage de la width:0;flex-grow:1 c’est la solution, mais pour envelopper les éléments, vous devez expliquer explicitement la width au navigateur, car il ne sait pas à quelle largeur vous souhaitez que les éléments soient enveloppés, et Dans cet esprit, vous ne jouez qu’avec setTimeout. Vérifiez les codes