javascript - Susy gallery with AngularJS (ng-repeat) - 不填补 ng-hide 的空白

Question

我正在使用 Susy 的画廊工具以网格格式显示元素。 Angular 会根据用户的选择动态地隐藏或显示这些网格元素。当 Angular 在网格中隐藏一个元素时，它会附加一个 ng-hide 类给它。这又将其 CSS 设置为 display:none !important。

问题在于 Susy 正在计算每个元素的位置，而没有考虑设置为 display:none 的元素 - 当这些元素被隐藏时，它会在网格中留下间隙。

是否可以让 Susy 在布局时忽略隐藏的元素？

我试过使用 :not() CSS 选择器，但没有成功 - 布局中仍然存在差距:

.results__result:not(.ng-hide) {
    @include gallery(3 of 12);
}

Answer 1

Sass 对 DOM 一无所知，所以 Susy 也不知道。要创建画廊布局，susy 必须依赖 nth-child 选择器——这对于您正在谈论的用例来说效果不佳。从简单开始:

.results__result {
  @include span(3 of 12);
}

如果您使用的是 split、inside 或 inside-static 装订线——那应该就可以了。否则，您需要某种方法来定位网格每一行中的 last 元素。 CSS 没有办法定位第 nth-visible，因此这需要在您的标记/js 中添加逻辑。每 4 个可见结果给定一个 last 类，您可以添加:

.last {
  @include last;
}