2016-09-07 3 views
0

내 페이지 매김에 슬라이딩 효과를 만들기 위해 CSS 전환을 사용하고 있습니다. 문제는 특정 위치로 전환 된 요소 위치를 설정하는 경우에도 포함 된 div의 높이가 여전히 변경된다는 것입니다. 내 CSS이각도 부모 파트에서 CSS 전환

.slide { 
    position: relative; 
    display: block; 
} 

.slide.ng-enter, 
.slide.ng-leave 
{ 
    -webkit-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -moz-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -ms-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -o-transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    transition: 2000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
} 

.slide.ng-enter { 
    left: 100%; 
} 
.slide.ng-enter.slide.ng-enter-active { 
    left: 0; 
} 

.slide.ng-leave { 
    left: 0; 
} 
.slide.ng-leave.slide.ng-leave-active{ 
    left: -100%; 
} 

내보기 여기

<div class="row slide" ng-repeat="alert in pagedItems[currentPage]"> 
    <div class="col-md-12"> 
     {{alert.attributes.subject}} 
    </div> 
</div> 

처럼 보이는 내 Plunker

답변

0

위치 사용해보십시오 : 대신 상대의 전환하는 동안 절대.

+0

더 구체적으로 또는 플 런커를 편집 할 수 있습니까? 감사합니다. –

+0

게시 한 CSS의 첫 번째 스타일 규칙을보십시오. –

+0

이렇게하면 모든 행이 서로 축소됩니다. –