是有可能使柔性盒插入物&删除？ [英] is it possible to animate flexbox inserts & removes?

问题描述

当我从弹出框中删除一个项目时，剩余的项目会立即捕捉到新的位置，而不是动画。

When I remove an item from a flexbox, the remaining items "snap" into their new positions immediately rather than animating.

从概念上来说，

我已经在所有相关元素（flexbox和子元素）上设置了transition属性。

I have set the transition property on all involved elements (the flexbox and the children)

有没有办法动画编辑（添加和删除）到flexbox？

Is there any way to animate edits (adds & deletes) to a flexbox? This is actually a showstopper for me and the one missing piece with flexbox.

推荐答案

我已经固定了@ skyline3000的演示基于本示例来自 Treehouse 。不确定如果浏览器发生变化，这是否会再次破坏，但这似乎是动画flex大小更改的预期方式：

I've fixed up @skyline3000's demo based on this example from Treehouse. Not sure if this will break again if browsers change but this seems to be the intended way to animate flex size changes:

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

我也使用jQuery，但从技术上来说不是必须的

Also I used jQuery but it technically isn't required.

.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 为零，它不会转换它只会消失。你只需要一个非常小的值。另外，在绘制边框时似乎有一个工件错误，所以我在这种情况下使用了背景。

One thing to note about the CSS is you can't transition to a flex-grow of zero, it won't transition it will just disappear. You need to just put a very small value. Also there seems to be an artifacting bug when drawing borders so I've used a background in this case.

这篇关于是有可能使柔性盒插入物&删除？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！