css3 – 是否可以为flexbox插入和移除动画？

当我从flexBox中删除一个项目时,其余项目立即“捕捉”到新位置而不是动画.

从概念上讲,由于项目正在改变其位置,我希望过渡适用.

我在所有涉及的元素(flexBox和子元素)上设置了过渡属性

有没有办法动画编辑(添加和删除)到FlexBox？这对我来说实际上是一个showstopper,而且是flexBox的一个缺失部分.

解决方法

我已经根据这个例子从 Treehouse修复了@ skyline3000的演示.如果浏览器发生变化,不确定这是否会再次破坏,但这似乎是设置弹性尺寸变化动画的预期方法：

http://jsfiddle.net/2gbPg/2/

我也使用jQuery,但技术上不需要.

.flexed {
    background: grey;
    /* The border seems to cause drawing artifacts on transition. Probably a browser bug. */
    /* border: 1px solid black; */
    margin: 5px;
    height: 100px;
    flex-grow: 1;
    transition: flex-grow 1000ms linear;
}

.removed {
    /* Setting this to zero breaks the transition */
    flex-grow: 0.00001;
}

有关CSS的一点需要注意的是,你不能过渡到flex-grow为零,它不会过渡它会消失.你只需要一个非常小的值.绘制边框时似乎还有一个伪影错误,所以我在这种情况下使用了背景.