是否可以为Flexbox插入,移除和项目位置设置动画?

时间:2015-03-03 01:52:56

标签: javascript css css-transitions css-animations flexbox

This question was originally asked back in 2012但是答案提供的内容并不包括我感兴趣的用例(包装内容更改行的平稳移动)。

  

“当我从Flexbox中删除某个项目时,其余项目会”快速“进入   他们的新职位立即而不是动画。

     

从概念上讲,由于物品正在改变其位置,我愿意   期望过渡适用。

     

我已经在所有涉及的元素上设置了过渡属性(   flexbox和孩子们)

     

有没有办法动画编辑(添加和删除)到flexbox?“

我特别感兴趣的是设置包装到其他行/列的flexbox项目的动画。

所需的最终功能类似于可用的in metafizzy's isotope.

2 个答案:

答案 0 :(得分:1)

我能做到,而且它很狡猾 https://codepen.io/balvin/pen/wXGyYw

没有包装,它更容易https://codepen.io/balvin/pen/gKrXdM 基本上您需要将所有弹性项目设置为width:0;flex-grow:1 但是当你想要它与wrap一起工作时,它变得有点困难,因为这些项目需要width以便能够包装它们,所以使用一些setTimeout我可以完成它

答案 1 :(得分:0)

简短回答是否定的(或至少尚未定义)。灵活顺序实际上是可动画的,因为在给定的时间范围内,它会在你想要的位置之间一次一个位置,但你不会得到平滑的元素转换。