网格系统 - 当列/div 被推到下一行时平滑过渡答案

【问题标题】：grid system - smooth transition when column/div gets pushed to next row网格系统 - 当列/div 被推到下一行时平滑过渡
【发布时间】：2017-04-18 10:45:00
【问题描述】：

我目前正在使用语义 UI 的网格系统，但这个问题也适用于任何其他网格系统（引导程序...）

我在一行中放置了四列卡片（很多卡片都带有来自 angular2 的 ngFor）。当我点击一张卡片时，它会扩展为行大小的一半（我为此使用了 angular 2 的 ngClass）

现在显然右侧的卡片将被推到下一行，我希望过渡“顺利”。有什么建议吗？

谢谢！

【问题讨论】：

你可以做这样的事情，但你需要 JavaScript。捕获点击事件，然后检测最后的 2 张卡片（因为第 2 张卡片不会被推送，但第 3 和第 4 张会被推送）。从这里，克隆这些对象并将它们向下移动到下一行。确保它们从页面开始，然后从左到右为它们设置动画。使用与将卡片增长到 half the row 时相同的动画时间，它应该看起来非常无缝
所以基本上我需要编写一个方法来检测将被推到下一行导致“捕捉”的卡片并手动为它们设置动画？
我会说这绝对是解决问题的一种方法，是的！

标签： css animation angular css-transitions semantic-ui

【解决方案1】：

您可以向列添加 CSS 过渡。例如：

div[class^="col-"] {
  transition: width 0.3s, height 0.3s;
}

这会选择类以col- 开头的所有 div 元素，并添加高度和宽度的过渡。您可以在几秒钟内更改该值以调整过渡的速度。此示例不包括供应商前缀。你可以在这里阅读更多关于转换的信息https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

【讨论】：

感谢您的回复，但这只会动画 col 的变化，而不是当 col 被推到另一行时的“捕捉”。