CSS Анимация для прокручиваемого списка

Question

Я создал простой элемент списка прокрутки в Angular.js, заимствуя совсем немного от uib-bootstrap carousel component. Он использует директиву ng-show с ngAnimate, ng-hide-add, ng-hide-remove, ng-hide-add-active и ng-hide-remove-active классы и Animate.css.

Here's a plunker

Как вы можете видеть, я изо всех сил на получение стилей CSS только вправо так, что он выглядит как плавный переход между элементами; элементы подергиваются немного при переключении между position: absolute и position: relative.

Я пробовал возиться с прокладками и полями элементов, но безрезультатно.

Я думаю, что ответ лежит в CSS, а не угловая коды, но любые указатели, чтобы сделать это хорошо выглядеть высоко ценится:

[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; 
} 

Я также не знает, почему на plunker есть задержка между скрывающимся элементом и отображаемым элементом ввода.

Большое спасибо!

Answer 1

Простое решение:

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