그리드 시스템 - 열/DIV는 다음 행

나는 현재 의미-UI의 그리드 시스템을 사용하고

에 푸시됩니다하지만이 질문은 또한 다른 그리드 시스템에 적용됩니다 원활한 전환 (부트 스트랩 ...) 나는 habe그리드 시스템 - 열/DIV는 다음 행

카드가 놓여있는 열의 네 열 (angular2의 ngFor를 가진 많은 카드). 카드를 클릭하면 행 크기의 절반으로 확장됩니다 (이 경우 각도 2의 ngClass를 사용하고 있습니다).

분명히 오른쪽에있는 카드가 다음 행으로 넘어 가서 전환이되기를 원합니다. "부드럽게". 어떤 제안?

감사합니다.

2016-12-03 Han Che

이 작업을 수행 할 수 있지만 JavaScript가 필요합니다. 클릭 이벤트를 캡처 한 다음 끝에있는 두 개의 카드를 감지합니다 (두 번째 카드가 푸시되지는 않지만 세 번째와 네 번째가됩니다). 여기에서 객체를 복제하고 다음 행으로 이동하십시오. 페이지에서 시작하여 왼쪽에서 오른쪽으로 애니메이션을 적용하십시오. '절반 행 '카드를 성장시킬 때와 똑같은 애니메이션 시간을 사용하면 꽤 보이지 않아야합니다. – Ohgodwhy

기본적으로 다음 줄에 밀려나는 카드를 감지 할 방법을 써야합니다. 수동으로 애니메이션을 적용 할 수 있습니까? –

분명히 그것에 대해 갈 수있는 한 가지 방법이 있습니다. – Ohgodwhy

열에 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

출처

2016-12-07 08:11:40 petecss

답장을 보내 주셔서 감사합니다.하지만 col이 다른 행으로 푸시되면 "체포"가 아닌 col의 변경 사항 만 애니메이션으로 나타납니다. –

그리드 시스템 - 열/DIV는 다음 행

답변

관련 문제