动画引导卡替换消失的引导卡答案

【问题标题】：animate bootstrap cards replacing disappearing ones动画引导卡替换消失的引导卡
【发布时间】：2018-10-04 21:11:25
【问题描述】：

想象一个使用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

【问题讨论】：

你不能，你需要改变样式/移动下部的卡片。过渡是控制从一种样式到另一种样式的过渡的属性。您无法隐藏完全不同的元素，所做的只是根据更改重新排列视觉元素，而不是更改样式。
@TheJSWizard 你会建议我做什么来实现我的目标？
它们是如何消失的？请添加minimal reproducible example。
@KoshVery 通过设置display: none; 属性。
那么，你的代码在哪里？

标签： javascript html css twitter-bootstrap sass

【解决方案1】：

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

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

【讨论】：

谢谢！我不知道那个图书馆！演示中使用的卡片是库的一部分吗？还是我必须自己设计卡片样式？
我不确定，但我猜，他们不应该。您必须自己设置样式。