javascript - 如何使用 css flex-wrap: wrap; 在 vanilla JavaScript 中制作 FLIP 动画？

Question

我如何使用 css flexbox 在 vanilla JavaScript 中制作 FLIP 动画，flex-wrap: wrap;因为我有一个可扩展的侧边栏并且页面内容包含 display: flex; 行中的项目以及当侧边栏展开或折叠时，每行中的第一个/最后一个项目会随着容器宽度的变化而突然变化（跳转到下一行或上一行）？

我需要此更改看起来像从位置 A（行的开头）到位置 B（上一行的结尾）的流动画。

此处显示了类似的动画： https ://codepen.io/techniq/pen/WxaxaR

但我需要在带有 CSS 的 vanilla JS 中做到这一点display: flex;

有任何想法吗？

标签： javascriptcssfliptypescript