ngAnimate nicht hinzufügen ng-Enter-Klassen in Ionic V1 App

Question

Ich habe eine ionic v1 App. Ich möchte einem Element eine grundlegende Animation hinzufügen, wenn es über ng-repeat zur Ansicht hinzugefügt wird. Wenn ich die Dokumente lese, sollte das Element eine ng-enter Klasse haben, die ich verwenden kann, um CSS-Animationen hinzuzufügen, tut es aber nicht.

ngAnimate ist mit Ionic enthalten. Ich bin Laden des Moduls:

angular.module('app', [ 
    'ionic', 
    'ngAnimate', 

Hier Ansicht Code, der verwendet ng-repeat:

<div class="entry" ng-repeat="message in messages | orderBy:'-id'">{{message}} 
</div> 

Wenn ich eine Nachricht an $scope.messages dynamisch fügen Sie ihn in der Ansicht hinzugefügt wird, wie man erwarten würde, aber es funktioniert nicht enthalten die ng-enter Klasse, die laut den Dokumenten es sollte.

Ich verwende Ionenversion 1.3.3, Angular 1.5.3 und ngAnimate 1.5.3.

Hier ist ein codepen das Problem zeigt: https://codepen.io/jamesjacobs/pen/YQyaZq

Was bin ich? Vielen Dank.

Answer 1

Hier ist, wie ngAnimate zu verwenden, mit ionischen

in Ansicht

<ion-item class="chat-item item-remove-animate item-avatar item-icon-right" ... 

css

Wenn Sie es mit chat-item Klasse verwenden möchten, verwenden Sie es wie unten

.chat-item.ng-enter { 
    -webkit-animation: fadeInLeft 1s; 
    animation: fadeInLeft 1s; 
} 

Der obige Code animiert die ganze Liste einmal. Wenn Sie jedes Element einzeln Verwendung ng-enter-stagger mit Verzögerung animieren möchten 200ms

.chat-item.ng-enter-stagger { 
    -webkit-animation-delay:200ms; 
    animation-delay:200ms; 

    /* override to make sure it's not inherited from other styles */ 
    -webkit-animation-duration:0; 
    animation-duration:0; 
} 

Demo