web-dev-qa-db-ja.com

flexbox内のアイテムのflex-growの遷移

フレックスボックス内のアイテムを移行することはできますか？クリックすると、クリックされたアイテム以外のすべてのアイテムが折りたたまれます。クリックされたものは、コンテナから利用可能なすべてのスペースを使用する必要があります。

// 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-growisanimatable ただし、値が <number> の場合のみ。ただし、値が0に設定されている場合、Google Chrome（v41）はアニメーションをトリガーしません。

これの回避策は、代わりに非常に小さな値を使用することです— 0.0001のようなもの：

更新された例。

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


});

フレックスグローを20から1にアニメートできます

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

.collapse {
    flex-grow: 1;

}

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

3
Ashot Khanamiryan

max-height。

.item
{
  max-height:100%;
}

.collapse
{
  max-height: 64px;
}

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

1
Rouby

1行のみが必要な場合、これは動作します https://codepen.io/balvin/pen/gKrXdM ですが、それらをラップしたい場合は https://codepen.io/balvin/pen/wXGyYw ハックのようですが、width:0;flex-grow:1それは解決策ですが、要素をラップするために、ブラウザにwidthを明示的に伝える必要があります。要素をラップする幅を知らないためです。 setTimeoutで遊ぶだけです。コードを確認してください

1
John Balvin Arias