javascript - column - Transición flex-grow de artículos en un flexbox

flex-shrink

Question

¿Es posible la transición de los elementos en un flexbox? Al hacer clic, quiero que todos los elementos se contraigan, excepto el que se ha pulsado. El que hace clic debe usar todo el espacio disponible del contenedor.

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

Puedes trabajar con max-height .

.item
{
  max-height:100%;
}

.collapse
{
  max-height: 64px;
}

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

Answer 2

Si solo quieres una fila, esto podría funcionar https://codepen.io/balvin/pen/gKrXdM pero si quieres envolverlos puedes usar https://codepen.io/balvin/pen/wXGyYw Parece que es un hack , pero establecer width:0;flex-grow:1 es la solución, pero para envolver los elementos, debe indicar explícitamente el width al navegador, porque no sabe a qué ancho quiere que se ajusten los elementos, y con eso en mente solo juegas con setTimeout. Verifica los codigos

Answer 3

flex-grow es animable pero solo si el valor es un <number> . Sin embargo, parece que Google Chrome (v41) no activa la animación si el valor se establece en 0 .

Una solución para esto podría ser utilizar un valor muy pequeño en su lugar, algo así como 0.0001 :

Ejemplo actualizado .

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

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


});

Y puedes animar flex-grow de 20 a 1.

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

.collapse {
    flex-grow: 1;

}

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