javascript - Animate ng-repeat list: push down list when inserting new item at top of the list -

i want animate list created using angularjs's ng-repeat. want insert new item @ top of list push down existing list items. effect looking 1 in this fiddle

in example list created using javascipt though , want use angularjs. using onsenui styling of ui.

i tried using ng-animate described here, animations work on newly created list object. existing list reloads , jumps down. new item gets ng-enter, ng-enter-active tags.

this list:

<ons-list-item class="item list__item--tappable list__item__line-height fade pushdown" ng-repeat="item in items"  modifier="chevron">   <ons-row ng-click="mynavigator.pushpage('html/details.html')">       <p class="item-desc">{{ item.message.text }}</p>   </ons-row> </ons-list-item> 

css:

.fade {   transition: 1s linear all;   -webkit-transition: 1s linear all; }  .fade.ng-enter {   opacity: 0; }  .fade.ng-enter.ng-enter-active {   opacity: 1; }  .pushdown {     animation: pushdown 0.5s; }  @-webkit-keyframes pushdown {   0%   { /*opacity:0;*/ -webkit-transform: translatey(-100%); }   100% { /*opacity:1;*/ -webkit-transform: translatey(0);   } }