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

Susy gallery with AngularJS (ng-repeat) - not filling gaps from ng-hide

本文关键字：ng-hide 空白 with gallery AngularJS ng-repeat Susy      更新时间：2023-09-26

我正在使用Susy的图库工具以网格格式显示元素。Angular 会动态隐藏或显示这些网格元素，具体取决于用户的选择。当 Angular 在网格中隐藏元素时，它会向其附加一类ng-hide。这反过来将其 CSS 设置为 display:none !important 。

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

有没有可能让苏茜在布置隐藏元素时忽略它们？

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

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

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

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

如果你使用的是split、inside或inside-static排水沟——这应该可以工作。否则，您需要某种方法来定位网格每一行中的last元素。CSS 没有办法定位第 n 个可见，因此这需要在标记/js 中添加逻辑。给定每 4 个可见结果一个last类，您可以添加：

.last {
  @include last;
}
相关文章：