AngyJS (ng-repeat)가 포함 된 수채 갤러리 - ng-hide에서 간격 채우기가 없음

Question

나는 Susy의 갤러리 도구를 사용하여 격자 형식으로 요소를 표시하고 있습니다. 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

말대꾸는 DOM에 대해 아무것도 모르는, 그래서 Susy 중 하나를하지 않습니다. 갤러리 레이아웃을 만들려면 susy가 nth-child 셀렉터에 의존해야합니다. 이는 사용중인 케이스에서 잘 작동하지 않습니다. 간단한 시작

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

당신이 split, inside, 또는 inside-static 홈통 사용하는 경우 - 그냥 작동한다. 그렇지 않으면 그리드의 각 행에있는 last 요소를 대상으로하는 방법이 필요합니다. CSS에는 nth-visible을 목표로하는 방법이 없으므로 마크 업/js에 추가 된 로직이 필요합니다. 두 번째 결과가 표시 될 때마다 last 클래스를 추가하면 다음을 추가 할 수 있습니다.

.last { 
    @include last; 
}