Question

我目前正在使用semantic-ui的网格系统，但这个问题也适用于任何其他网格系统（bootstrap ...）

我连续四列放置了卡片（很多卡片都带有来自angular2的ngFor）。当我点击卡片时，它会扩展到行大小的一半（我使用的是角度2的ngClass）

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

谢谢！

Answer 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