Transition flex-grow 在 flexbox 中的项目 [英] Transition flex-grow of items in a flexbox

问题描述

是否可以转换 flexbox 中的项目?当您单击时，我希望所有项目都折叠起来，除了被单击的项目.单击的那个应该使用容器中的所有可用空间.

//只工作一次！$(".item").click(function() {$(".item").not(this).each(function() {$(this).addClass("折叠");});});

html, body {宽度:100%；高度:100%；边距:0；填充:0；边框:0；溢出:隐藏；}.容器 {弹性增长:1；弹性收缩:0；弹性基础:自动；显示:弹性；弹性方向:列；高度:100%；}.物品 {弹性增长:1；弹性收缩:1；弹性基础:自动；过渡:全2s；}.坍塌 {弹性增长:0；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="容器"><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>

JSFiddle:http://jsfiddle.net/clankill3r/L8hktsgn/

解决方案

flex-grow 是可动画，但前提是值为 .但是，如果该值设置为 0，Google Chrome (v41) 似乎不会触发动画.

对此的解决方法可能是使用一个非常小的值——例如 0.0001:

更新示例.

$(".item").click(function() {$(".item").addClass("折叠");$(this).removeClass("collapse");});

html, body {宽度:100%；高度:100%；边距:0；填充:0；边框:0；溢出:隐藏；}.容器 {弹性基础:自动；显示:弹性；弹性方向:列；高度:100%；}.物品 {弹性增长:1；弹性收缩:1；弹性基础:自动；过渡:全2s；}.坍塌 {弹性增长:0.001；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="容器"><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>

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/

解决方案

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>

这篇关于Transition flex-grow 在 flexbox 中的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！