当我从flexBox中删除一个项目时,其余项目立即“捕捉”到新位置而不是动画.
从概念上讲,由于项目正在改变其位置,我希望过渡适用.
我在所有涉及的元素(flexBox和子元素)上设置了过渡属性
有没有办法动画编辑(添加和删除)到FlexBox？这对我来说实际上是一个showstopper,而且是flexBox的一个缺失部分.
解决方法
我已经根据这个例子从
Treehouse修复了@ skyline3000的演示.如果浏览器发生变化,不确定这是否会再次破坏,但这似乎是设置弹性尺寸变化动画的预期方法：
我也使用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为零,它不会过渡它会消失.你只需要一个非常小的值.绘制边框时似乎还有一个伪影错误,所以我在这种情况下使用了背景.
