스크롤 목록에 대한 CSS 애니메이션

Question

uib-bootstrap carousel component에서 약간 차용하여 Angular.js에 간단한 스크롤 목록 구성 요소를 만들었습니다. ngAnimate, ng-hide-add, ng-hide-remove, ng-hide-add-active 및 ng-hide-remove-active 클래스 및 Animate.css 클래스의 ng-show 지시문을 사용합니다. 당신이 볼 수 있듯이

Here's a plunker

, 나는 그것이 항목 간의 원활한 전환처럼 나타나도록 바로 CSS 스타일을 얻기에 어려움을 겪고 있어요; position: absolute과 position: relative 사이에서 토글 할 때 약간 주위를 비웃는 항목.

필자는 요소의 여백과 여백을 사용하여 아무런 소용이 없었습니다.

나는 대답은 오히려 각도 코드보다는 CSS에있다 생각하지만, 어떤 포인터이 많이 감사합니다 잘 보이게하기 위해 다음 plunker에 왜 거기

[list-scroller] { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 

[list-scroller] li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

scroller-item { 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 

scroller-item.ng-hide-add { 
    animation: fadeOutUp 0.5s; 
    display: inline-block !important; 
} 
scroller-item.ng-hide-add-active { 
    position: absolute !important; 
} 

scroller-item.ng-hide-remove { 
    animation: fadeInUp 0.5s; 
    display: inline-block !important; 
} 
scroller-item.ng-hide-remove-active { 
    position: absolute !important; 
} 

나는 또한 확실하지 않다 존재하는 요소 숨김과 보여주고있는 입력 요소 사이의 지연.

감사합니다.

Answer 1

간단한 솔루션 :

.ng-hide-add.ng-hide-add-active { 
    position: absolute; 
    bottom: 0; 
}