Javascript flexbox中项目的过渡flex增长

是否可以转换flexbox中的项目？ 单击时，我希望所有项目都折叠，但单击的项目除外。 被单击的容器应使用容器中的所有可用空间

//只工作一次！
$（“.item”）。单击（函数（）{
$（“.item”）.not（this）.each（function（）{
$（此）.addClass（“崩溃”）；
});
});
html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
边界：0；
溢出：隐藏；
}
.集装箱{
柔性生长：1；
弹性收缩：0；
弹性基础：自动；
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.项目{
柔性生长：1；
弹性收缩：1；
弹性基础：自动；
过渡：所有2；
}
.崩溃{
flex-grow:0；
}

A.
B
C
D

您可以设置flex从20增长到1的动画

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

.collapse {
    flex-grow: 1;

}

您可以使用
最大高度

.item
{
  max-height:100%;
}

.collapse
{
  max-height: 64px;
}

flex grow
但仅当值为。然而，如果该值设置为
0
，谷歌浏览器（v41）似乎不会触发动画

一个解决方法是使用一个非常小的值，比如
0.0001
：



$（“.item”）。单击（函数（）{
$（“.item”）.addClass（“崩溃”）；
$（this.removeClass（“collapse”）；
});
html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
边界：0；
溢出：隐藏；
}
.集装箱{
弹性基础：自动；
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.项目{
柔性生长：1；
弹性收缩：1；
弹性基础：自动；
过渡：所有2；
}
.崩溃{
弹性增长：0.001；
}

A.
B
C
D
如果您只需要一行，这可以工作，但如果您想包装它们，可以使用
似乎这是一个黑客，但设置
width:0；flex grow:1
这是解决方案，但为了包装元素，您需要明确地告诉浏览器
宽度，因为它不知道您希望元素包装的宽度，记住这一点，您只需使用setTimeout即可。检查代码
您不能将
flex grow
从/转换为0。有人能告诉我为什么jQuery的animate方法在这种情况下不起作用吗？我添加了带animate的jsfiddle，这只是我的印象，还是在转换
flex grow
时忽略了
转换计时功能（我真的不知道度量之间有什么区别）？@nils它似乎起作用了（在Chrome 46中测试）。可以通过在开发工具中使用cubic bezier编辑器进行验证，例如：
cubic bezier（0.19,1.41,0.54，-0.43）
作为计时函数。如果我们不能使用flex grow，因为我们的容器没有定义的高度，该怎么办？我的用例是，我想建立一个吐司系统（用户反馈系统），其中可以同时显示3个吐司。当第一个吐司消失时，第二个吐司应通过动画将自身定位到第一个吐司的前一个位置。有什么想法吗？很好地理解了0.0001，这是我们必须编写的一个常见的讨厌的猴子补丁。刚刚发现这将在IE11上中断。所以你可能不应该使用它，除非你同意排除IE用户。
.item
{
  max-height:100%;
}

.collapse
{
  max-height: 64px;
}