javascript - 动画 Bootstrap 卡替换消失的卡

Question

想象一个使用 bootstrap cards 的网站.

现在，如果您单击一个按钮使上面的一些卡片消失，下面的卡片将在眨眼之间神奇地填充最近消失的卡片的位置。 消失卡片下方的卡片如何平滑向上过渡并取而代之？

注意:我正在寻找的答案只需要解决我的问题 - 我不在乎如何解决。

---

我尝试了以下方法:

#projects.card { //expect that each card have been supplied with the class name 'card'
    -moz-transition: 2s;
    -ms-transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    transition: 2s;
}

---

展示过渡未发生的 gif: Click here to view the GIF

Answer 1

非常高层次的想法是让所有的位置都在内存中，并根据这些位置和位置的变化自己处理所有的运动。

但您可以使用预构建的库，例如 https://vestride.github.io/Shuffle/