当我从Flexbox移除项目时,其余项目会立即“捕捉”到其新位置,而不是进行动画处理。
从概念上讲,由于项目正在改变其位置,因此我希望过渡会适用。
我已经在所有涉及的元素(flexbox和子元素)上设置了transition属性
有什么办法可以使对Flexbox的编辑(添加和删除)动画化?这实际上是我的首选,也是flexbox缺少的一部分。
最佳答案
我已经根据Treehouse的示例修复了@ skyline3000的演示。不知道如果浏览器发生更改,这种情况是否还会再次中断,但这似乎是使flex大小发生变化的动画的预期方式:
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
,它不会转换,只会消失。您只需要输入一个很小的值。在绘制边框时似乎还存在人为错误,因此在这种情况下我使用了背景。关于css - 是否可以对Flexbox插入和删除进行动画处理?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11106876/