AngularJS ng-repeatのアニメーションについて

ng-repeatで生成しているリストで、データ追加時にアニメーションを行いたいので、
ngAnimateを使用し、実装を行っている所なのですが、
データを複数追加しても、何故か１つの要素しかアニメーションされず、途方に暮れております。

ただ、たまに複数の要素が正常にアニメーションされることもあり、
根本的に何が原因なのか、検討もつかない状況です。

もしご存知の方がおられましたら、ご教授いただければ幸いです。

###該当のソースコード
データの追加時は、ajaxでサーバからデータ取得後、下記のように配列をJoinしております。

datas => 取得データ
scope.listdata => ng-repeatで指定されている変数

Javascript
1Array.prototype.push.apply( datas, $scope.listdata );
2$scope.listdata = datas;

Html，CSSは下記のとおりです。

Html
1<ons-list id="chat_list">
2    <ons-list-item ng-repeat="item in listdata" class="animated" style="overflow: hidden;">
3        <div>
4             <div ng-bind-html="item.ArticleComment.content"></div>
5        </div>
6    </ons-list-item>
7</ons-list>

css
1.animated.ng-enter {
2  -webkit-transition: all 1.0s linear;
3  transition: all 1.0s linear;
4}
5.animated.ng-enter {
6  opacity: 0;
7  height: 0;
8  min-height: 0 !important;
9}
10.animated.ng-enter.ng-enter-active {
11  opacity: 1;
12  height: 40px;
13}