当我从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/

10-09 19:00
查看更多