web-dev-qa-db-fra.com

Transition flex-grow d'articles dans un flexbox

Est-il possible de transférer les éléments dans une flexbox? Lorsque vous cliquez sur Je veux que tous les éléments se réduisent, sauf celui sur lequel vous avez cliqué. Celui sur lequel vous cliquez 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;
}
<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/

javascriptjquerycsscss-animationsflexbox
24
clankill3r

flex-grow est animable mais seulement si la valeur est un <number> . 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;
}
<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>
26
Hashem Qolami
$(".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/

3
Ashot Khanamiryan

Vous pouvez travailler avec max-height.

.item
{
  max-height:100%;
}

.collapse
{
  max-height: 64px;
}

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

1
Rouby

Si vous ne voulez qu'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 Semble que c'est un hack, mais en définissant width:0;flex-grow:1 c'est la solution, mais pour envelopper les éléments, vous devez dire explicitement width au navigateur, car il ne sait pas à quelle largeur vous voulez que les éléments soient enveloppés, et avec cela à l'esprit vous il suffit de jouer avec setTimeout. Vérifiez les codes

1
John Balvin Arias