ng-repeat enter анимация не работает (только когда новый элемент добавлен в ng-repeat)

Question

Я использую ng-animate в своем приложении. Когда мое приложение для чата открывает или перезагружает список сообщениями, оно загружается с хорошим угасанием в анимации.

Это мой код:

<ion-content class="chatBox" delegate-handle="chatBox"> 
    <ion-list> 
     <ion-item class="animate-repeat" ng-repeat="message in messages | orderBy: '-pn_apns.aps.timetoken' | unique: 'pn_apns.aps.timetoken' track by $index"> 
      <div class="chatMessageTitle" ng-if="message.pn_apns.aps.userName != null"> 
       <h1 on-tap="reply(message.pn_apns.aps.userName)" class="nameTag" >{{ message.pn_apns.aps.userName }}</h1> <time-ago class="time" from-time='{{ message.pn_apns.aps.currentDate }}' ng-class="{'last': $last}"></time-ago> 
      </div> 
      <div class="chatMessage" timetoken="{{ message.pn_apns.aps.timetoken }}" ng-class="{'firstMessage': $first, 'lastMessage': $last}"> 
       <div class="chatText" ng-bind-html="message.pn_apns.aps.chatMessage" ng-if="message.pn_apns.aps.chatMessage != null || message.pn_apns.aps.chatMessage.length < 1" ng-class="{'zeroHeight': message.pn_apns.aps.chatMessage.length < 1}"></div> 
       <!--Youtube--> 
       <div class="video-container" ng-if="message.pn_apns.aps.youtubeVideo != null"> 
        <iframe width="420" height="345" ng-src="{{ message.pn_apns.aps.youtubeVideo }}" frameborder="0" sandbox="allow-scripts allow-top-navigation allow-same-origin" allowfullscreen></iframe> 
       </div> 
       <!--Images--> 
       <img ng-src="{{ message.pn_apns.aps.externalImage }}" ng-if="message.pn_apns.aps.externalImage != null"/> 
       <!--Read Marker--> 
       <div class="readMarker animate-repeat" ng-if="message.pn_apns.aps.timetoken == lastReadPosition && $index > 5">This was your last read position</div> 
      </div> 
     </ion-item> 
    </ion-list> 
</ion-content> 

Это мой стиль CSS:

/* ng-repeat animation styling */ 
.animate-repeat.ng-move, 
.animate-repeat.ng-enter, 
.animate-repeat.ng-leave { 
    -webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); 
    -moz-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); 
    transition:   all 300ms cubic-bezier(0.215, 0.61, 0.355, 1); 
} 

.animate-repeat.ng-leave.ng-leave-active, 
.animate-repeat.ng-move, 
.animate-repeat.ng-enter { 
    opacity:0; 
} 

.animate-repeat.ng-leave, 
.animate-repeat.ng-move.ng-move-active, 
.animate-repeat.ng-enter.ng-enter-active { 
    opacity:1; 
} 

Так анимировать нг-повтор на нагрузки работают, также считанный Маркер, который поставляется с animate- Повторный класс анимируется, когда он входит или уходит.

Таким образом, похоже, что он работает, но когда новое сообщение добавлено в список ng-repeat, новое сообщение не анимируется. Что здесь происходит?

Answer 1

Видимо эта проблема является ограничением, если вы используете track by $index в ng-repeat, анимации не работают.

Смотрите также

• https://forum.ionicframework.com/t/track-by-index-messes-up-animation/21489
• https://github.com/angular/angular.js/issues/7119