スクロールリストの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; 
}