是否可以设置柔盒插入、移除和项目位置的动画



这个问题最初是在2012年提出的,但提供的答案并没有涵盖我感兴趣的用例(换行内容更改行的平滑移动)。

当我从柔性盒中删除一个项目时,剩余的项目会"卡入"他们的新位置立即而不是动画。

从概念上讲,由于这些项目正在改变它们的位置,我会期望应用转换。

我已经在所有涉及的元素上设置了转换属性(flexbox和儿童)

有没有任何方法可以对柔盒进行动画编辑(添加和删除)?"

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

所需的最终功能将类似于metafissy同位素中的可用功能。

我可以做到,但这有点棘手https://codepen.io/balvin/pen/wXGyYw

没有包裹,更容易https://codepen.io/balvin/pen/gKrXdM基本上,您需要将所有弹性项目设置为width:0;flex-grow:1但是,当您希望它使用wrap时,它会变得有点困难,因为项目需要有width才能进行wrap,所以使用一些setTimeout,我可以简化

简短的回答是否定的(或者至少还没有)。弹性顺序实际上是可设置动画的,因为在给定的时间范围内,它会在您想要的位置之间一次移动一个位置,但您不会得到元素的平滑平移。

相关内容

  • 没有找到相关文章

最新更新