是否可以为 Flexbox 插入动画制作动画?删除? [英] Is it possible to animate Flexbox inserts & removes?

问题描述

当我从 flexbox 中移除一个项目时，剩余的项目会立即对齐"到它们的新位置而不是动画.

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

从概念上讲，由于项目正在改变它们的位置，我希望转换能够应用.

Conceptually, since the items are changing their positions, I would expect the transitions to apply.

我已经为所有涉及的元素(flexbox 和子元素)设置了 transition 属性

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

有什么方法可以对 flexbox 进行动画编辑(添加和删除)?这对我来说实际上是一个亮点，也是 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.

推荐答案

我已经根据 树屋.不确定如果浏览器更改，这是否会再次中断，但这似乎是为 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.

这篇关于是否可以为 Flexbox 插入动画制作动画?删除?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！