CSS-Animationen für eine Scrolling-Liste

Question

Ich habe eine einfache Scrolling-Liste Komponente in Angular.js erstellt, ein wenig aus der uib-bootstrap carousel component Borrowing. Es verwendet die ng-show Direktive mit ngAnimate, die ng-hide-add, ng-hide-remove, ng-hide-add-active und ng-hide-remove-active Klassen und Animate.css.

Here's a plunker

Wie Sie sehen können, bin ich kämpfen, um die CSS-Stile auf immer genau richtig, so dass es wie ein fließender Übergang zwischen den einzelnen Posten erscheint; die Elemente ruckeln ein wenig, wenn zwischen position: absolute und position: relative gewechselt wird.

Ich habe versucht, mit den Polsterungen und Rändern der Elemente zu fummeln, vergeblich.

Ich denke, die Antwort in der CSS liegt, eher als der Winkel Code, aber alle Hinweise auf diesen gut sehr geschätzt aussehen:

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

Ich bin auch nicht sicher, warum auf dem Plunker eine ist Verzögerung zwischen dem Verbergen des austretenden Elements und dem eintretenden Element.

Vielen Dank!

Answer 1

Die einfache Lösung:

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